UHTML5 est la specification HTML la plus longue 
jamais ecrite. C'est egalement la plus puissante et, en 
un sens, la plus deroutante. Que doivent en retenir 
les web designers et les developpeurs ? Comment 
exploiter toute la puissance de THTML5 dans les 
navigateurs actuels ? 

Avec beaucoup de style et d'esprit, Jeremy Keith va 
droit a l'essentiel dans ce guide de Tutilisateur brillant 
et divertissant et repond a toutes ces questions, 
exemples clairs et concrets a l'appui. 
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AVANT-PROPOS 



Quand Mandy Brown, Jason Santa Maria et moi-meme avons 
fonde A Book Apart, un sujet nous preoccupait plus que les 
autres. Un seul auteur pouvait s'y attaquer. 

Rien, pas meme l'arrivee des « vraies » polices de caracteres ni 
de CSS3, n'avait agite la communaute du web design standardise 
comme l'arrivee imminente de FHTML5. Nee des dissensions 
provoquees par la lenteur et les politiques du W3C, concue pour 
un Web d'applications et pas uniquement de documents, cette 
nouvelle edition de la lingua franca du Web a a la fois excite, 
enerve et desoriente la communaute des web designers. 

Comme il l'a prouve avec le DOM et JavaScript, Jeremy Keith 
possede un talent unique qui lui permet d'illuminer FHTML5 et 
d'aller droit a l'essentiel pour les besoins des designers-develop- 
peurs. C'est ce qu'il fait dans ce livre, avec le strict nombre de 
mots et d'images necessaire. 

Il existe d'autres livres traitant de THTML5, et il en paraitra bien 
d'autres encore. Il y aura des livres techniques de 500 pages 
pour les developpeurs d'applications, ceux dont les besoins ont 
largement aiguille le developpement de FHTML5. Il y aura des 
livres secrets encore plus longs pour les createurs de naviga- 
teurs, abordant des defis techniques que vous et moi n'aurons 
fort heureusement jamais a envisager. 

Mais ce livre-ci est pour vous, vous qui creez du contenu sur 
le Web, qui utilisez ces balises pour leur sens et la semantique, 
vous qui concevez des interfaces et des experiences accessibles. 
Ce sera votre guide de l'utilisateur d'HTML5. Son but, commun 
a tous les titres a paraitre dans le catalogue de A Book Apart, 
est de demeler un sujet delicat, et de le faire vite pour mieux 
retourner au travail. 



Jeffrey Zeldman 
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L'HTML est le langage unificateur du World Wide Web. Avec 
les simples balises qu'il contient, l'Homme a cree un reseau de 
documents « hyperlies », etonnamment varie, d'Amazon, eBay 
et Wikipedia aux blogs et sites personnels consacres aux chats 
sosies d'Hitler. 

I/HTML5 est la derniere iteration en date de cette lingua franca. 
Bien qu'elle constitue le changement le plus ambitieux de notre 
langue commune, ce n'est pas la premiere fois que le format 
HTML est mis a jour. Ce langage evolue depuis sa naissance. 

Comme le Web lui-meme, 1'HyperText Markup Language est 
une invention personnelle de Sir Tim Berners-Lee. En 1991, 
il ecrivit un document intitule « HTML Tags » dans lequel il 
proposa moins de deux douzaines d'elements pouvant etre util- 
ises pour ecrire des pages web. 

Sir Tim n'est pas 1'inventeur des balises, ces mots compris entre 
les signes inferieur (<) et superieur (>) ; celles-ci existaient deja 
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dans le format SGML (Standard Generalized Markup Language). 
Plutot que d'inventer une nouvelle norme, Sir Tim comprit 
qu'il etait preferable de construire sur les fondations existantes, 
une tendance qui s'observe encore aujourd'hui dans le develop- 
pement de l'HTMLs. 



DE L'lETF AU W3C : LA ROUTE VERS L'HTML 4 

L'HTML 1 n'a jamais existe. La premiere specification officielle 
fut l'HTML 2.0, publiee par 1'IETF, l'lnternet Engineering Task 
Force. De nombreuses fonctions de cette specification etaient 
tirees d'applications existantes. Par exemple, le navigateur 
web Mosaic de 1994, alors leader du marche, permettait deja 
aux auteurs d'incorporer des images dans leurs documents a 
l'aide d'une balise <img>. L'element img apparut plus tard dans 
la specification HTML 2.0. 

LTIETF fut supplante par le W3C, le World Wide Web 
Consortium, qui publia les versions ulterieures de la norme 
HTML sur son site web http://www.w3.0rg. La deuxieme moitie 
des annees 1990 vit une vague de revisions de la specification, 
jusqu'a la publication de l'HTML 4.01 en 1999. 

A ce moment, l'HTML etait a son premier tournant capital. 



XHTML 1: L'HTML EN XML 

Apres l'HTML 4.01, une nouvelle revision du langage, appelee 
XHTML 1.0, vit le jour. Le X signifiait « eXtreme », et les devel- 
oppeurs web devaient croiser les bras en prononcant la lettre. 

Non, pas vraiment. II s'agissait du X de « extensible », et la 
gestuelle etait tout a fait facultative. 

Le contenu de la specification XHTML 1.0 etait identique a celui 
de l'HTML 4.01 et ne comprenait aucun nouvel element ou 
attribut. La seule difference residait dans la syntaxe du langage. 
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La oil l'HTML offrait une grande liberte aux auteurs dans la 
redaction des elements et des attributs, le XHTML exigeait que 
Ton suive les regies du XML, un langage de balisage plus strict 
sur lequel le W3C fondait la plupart de ses technologies. 

Des regies plus strides n'etaient pas forcement mauvaises. 
Elles incitaient les auteurs a utiliser un style d'ecriture unique. 
Alors que les balises et les attributs pouvaient precedemment 
etre ecrits en majuscules, en minuscules voire en un melange 
des deux, les balises et les attributs d'un document XHTML 1.0 
devaient etre ecrits en minuscules pour que celui-ci soit valide. 

La publication du XHTML 1.0 coincida avec l'essor des navigateurs 
compatibles avec CSS. Comme les web designers soutenaient 
^emergence de normes du Web incarnee par le Web Standards 
Project, le XHTML, avec sa syntaxe plus stricte, semblait etre un 
langage de balisage repondant aux « bonnes pratiques ». 

Puis, le W3C publia le XHTML 1.1. 

Alors que le XHTML 1.0 n'etait que du HTML reformule en 
XML, le XHTML 1.1 etait du XML, du vrai, de l'authentique. 
Cela signifie qu'il ne pouvait pas etre traite avec un type MIME 
text/html. Pourtant, si un auteur publiait un document avec 
un type MIME XML, le navigateur web le plus populaire du 
moment, Internet Explorer, ne pouvait pas l'interpreter. 

C'etait comme si le W3C avait perdu pied avec la realite quoti- 
dienne de la publication sur le Web. 

XHTML 2 : SAUVE QUI PEUT ! 

Si le personnage de Dustin Hoffman dans Le Laureat avait ete web 
designer, le W3C lui aurait dit un mot, juste un mot : XML. 

Pour le W3C, l'HTML etait fini depuis la version 4. II commenca 
a developper le XHTML 2, cense conduire le Web vers un 
nouvel horizon radieux, avec le XML pour decor. 
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Meme si le nom XHTML 2 ressemblait a s'y meprendre a 
XHTML 1, ces deux langages n'avaient pas grand chose en 
commun. A la difference du XHTML 1, le XHTML 2 etait 
incompatible avec le contenu existant du Web, et meme avec 
les versions precedentes de l'HTML. Ce devait etre un langage 
pur, affranchi du passe trouble des specifications precedentes. 

Ce fut un desastre. 

LE SCHISME : WHATWG TF ? 

Une rebellion se dessina au sein du W3C. On aurait dit que 
le consortium formulait des normes theoriquement pures sans 
aucun rapport avec les besoins des web designers. Les represen- 
tants d'Opera, d'Apple et de Mozilla etaient frustres par la tour- 
nure des evenements. lis voulaient que la priorite soit accordee 
aux formats permettant la creation d'applications web. 

Le differend atteignit son paroxysme lors d'un seminaire, en 
2004. Ian Hickson, qui travaillait alors pour Opera Software, 
proposa de developper l'HTML pour permettre la creation 
d'applications web. Sa proposition fut rejetee. 

Les rebelles desabuses formerent leur propre groupe : le 
Web Hypertext Application Technology Working Group, ou 
WHATWG pour faire court. 

DE WEB APPS 1.0 A LHTML5 

Des le depart, le WHATWG prit une toute autre direction que 
le W3C. Le W3C cherche le consensus : des questions sont 
soulevees, debattues, puis votees. Au WHATWG, des questions 
sont aussi soulevees et debattues, mais la decision finale, en ce 
qui concerne le contenu d'une specification, revient a l'editeur. 
Cet editeur, c'est Ian Hickson. 
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A premiere vue, la procedure du W3C semble plus juste et plus 
democratique. Dans les faits, les opinions divergentes et les 
querelles internes peuvent freiner les avancees. Au WHATWG, 
oil tout le monde est libre de contribuer mais oil l'editeur a 
le dernier mot, les choses vont plus vite. D'ailleurs, l'editeur 
ne dispose pas vraiment d'un pouvoir absolu : un comite de 
pilotage recrute sur invitation peut opposer son veto, dans le 
cas improbable d'un scenario a la Docteur Folamour. 

Au debut, le gros du travail du WHATWG portait sur deux 
specifications : Web Forms 2.0 et Web Apps 1.0. Ces deux 
specifications etaient destinees a completer l'HTML. Avec le 
temps, elles furent regroupees dans une seule specification, 
simplement appelee HTML5. 

LA REUNIFICATION 

Pendant que le WHATWG developpait l'HTMLs, le W3C 
continuait a travailler sur le XHTML 2. II serait inexact de dire 
qu'il foncait droit dans le mur ; il y allait tres, tres lentement. 

En octobre 2006, Sir Tim Berners-Lee admit sur son blog que la 
tentative de migration du Web de l'HTML vers le XML ne marchait 
tout bonnement pas. Quelques mois plus tard, le W3C etablissait 
une nouvelle charte creant un groupe de travail HTML. Au lieu de 
partir de zero, ils deciderent judicieusement d'utiliser le travail du 
WHATWG comme base pour les versions futures de l'HTML. 

Toutes ces allees et venues rendirent la situation confuse. Le 
W3C travaillait simultanement sur deux langages de balisage 
differents et incompatibles : le XHTML 2 et l'HTML 5 (notez 
l'espace avant le chiffre cinq). Au meme moment, une autre 
organisation, le WHATWG, travaillait sur une specification 
appelee HTML5 (sans espace) qui devait servir de base a l'une 
des specifications du W3C ! 

Un web designer desireux de comprendre la situation aurait 
mieux fait de s'envoyer l'ceuvre complete de David Lynch. 
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LE XHTML EST MORT: 
VIVE LA SYNTAXE XHTML ! 

Ce brouillard de confusion commenca a se dissiper en 2009. 
Le W3C annonca que la charte du XHTML 2 ne serait pas 
renouvelee. Dans les faits, le format etait mort depuis plusieurs 
annees ; cette annonce n'etait rien de plus qu'un certificat de 
deces. 

Curieusement, plutot que de passer inapercue, la mort du 
XHTML 2 fut accueillie par la jubilation de quelques mauvais 
esprits. Les detracteurs du XML se servirent de cette annonce 
pour tourner en ridicule quiconque avait jamais utilise le 
XHTML 1, meme si le XHTML 1 et le XHTML 2 n'avaient 
pratiquement rien en commun 

Parallelement, les auteurs qui utilisaient le XHTML 1 pour appli- 
quer un style d'ecriture plus strict craignirent que l'avenement 
de THTML5 ne presageat un retour au desordre. 

Comme vous le verrez bientot, ce n'est pas forcement le cas. 
L'HTML5 est aussi desordonne ou strict que vous le souhaitez. 

L'HISTORIQUE DE LHTML5 

L'etat actuel de THTML5 n'est plus aussi confus qu'il a ete, mais 
il n'est toujours pas parfaitement clair. 

Deux groupes travaillent sur FHTML5. Le WHATWG cree 
une specification HTML5 en suivant une procedure dite de 
« Commit-Then-Review » : les changements sont appliques 
avant d'etre examines et debattus. Le groupe de travail HTML 
du W3C prend cette meme specification en suivant la proce- 
dure inverse (« Review-Then-Commit »). Comme vous pouvez 
l'imaginer, l'alliance est ardue. Toutefois, il semble que la ques- 
tion epineuse de l'espace ait trouve un consensus (c'est HTML5 
sans espace, si vraiment ca vous interesse). 
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La question la plus troublante pour les web designers qui trem- 
pent leurs orteils dans les eaux troubles de FHTML5 est peut- 
etre celle-ci : « Quand sera-t-il pret ? » 

Dans un entretien, Ian Hickson a declare que selon lui, THTML5 
obtiendrait le statut de proposition de recommandation en 
2022. Cette annonce a declenche une vague de protestations 
de la part de quelques web designers. lis ne comprenaient pas 
le sens de « proposition de recommandation », en revanche ils 
savaient qu'ils n'avaient pas assez de doigts pour compter les 
annees jusqu'en 2022. 

Ces protestations etaient indues. Dans ce cas precis, le statut 
de « proposition de recommandation » requiert deux imple- 
mentations completes de THTML5. Au vu de l'envergure de la 
specification, cette date est incroyablement ambitieuse. Apres 
tout, les navigateurs n'ont pas les meilleurs antecedents quant 
a l'implementation des normes existantes. II a fallu plus d'une 
decennie pour qu'Internet Explorer supporte l'element abbr. 

La date vraiment importante pour l'HTMLs est 2012. C'est en 
2012 que la specification doit devenir « recommandation candi- 
date », c'est-a-dire etre fin prete dans le discours normatif. 

Mais cette date n'est pas particulierement pertinente non plus pour 
les web designers. Ce qui compte avant tout, c'est la compatibilite 
des navigateurs avec les nouvelles fonctionnalites. On a commence 
a utiliser des morceaux de CSS 2.1 des que certains navigateurs ont 
ete en mesure de les interpreter. Si Ton avait attendu que tous les 
navigateurs soient entierement compatibles avec CSS 2.1 avant de 
l'utiliser, on serait encore en train d'attendre. 

Cela vaut egalement pour THTML5 . On ne pourra pas le declarer 
« pret a l'emploi » a un moment precis. On commencera plutot 
a utiliser des morceaux de la specification au gre de leur imple- 
mentation dans les navigateurs. 

Souvenez-vous, FHTML5 n'est pas un langage complete- 
ment nouveau, parti de rien. C'est une evolution, plus qu'une 
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revolution, dans l'histoire ininterrompue des langages de 
balisage. Si vous creez actuellement des sites web avec n'importe 
quelle version de l'HTML, vous utilisez deja THTML5. 
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La Revolution francaise fut une ere de bouleversements politiques 
et sociaux. La ferveur revolutionnaire s'appliqua meme a l'heure : 
pendant une breve periode, la Republique francaise mit en place 
un systeme horaire decimal, chaque jour etant divise en dix heures 
et chaque heure en cent minutes. C'etait un systeme parfaitement 
logique et clairement superieur au systeme sexagesimal. 

Le temps decimal fut un echec. Personne ne Futilisa. On pour- 
rait dire la meme chose du XHTML 2. Le W3C a redecouvert 
l'histoire de la France postrevolutionnaire : les comportements 
sont peu enclins au changement. 



PRINCIPES DE CONCEPTION 

Desireux d'eviter les erreurs du passe, le WHATWG a redige une 
liste de principes de conception afin d'orienter le developpement de 
THTML5. Un des principes cles consiste a « supporter le contenu 
existant ». Cela signifie qu'il n'y a pas d'an zero pour FHTML5. 
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La ou le XHTML 2 avait tente de balayer tout ce qui prece- 
dait, THTML5 se construit a partir de specifications et 
d'implementations existantes. L'essentiel de l'HTML 4.01 a 
survecu dans FHTML5. 

L'HTML5 comprend d'autres principes, tels que « ne pas rein- 
venter la roue » et « paver le sentier des vaches ». Cela veut dire 
que s'il existe une facon repandue d'accomplir une tache chez 
les web designers, et meme si ce n'est pas la meilleure, elle doit 
etre codifiee en HTML5. On pourrait aussi dire : « si ce n'est pas 
casse, on ne repare pas ». 

Nombre de ces principes de conception vous seront familiers 
si vous vous etes deja interesse a la communaute des microfor- 
mats (http://microformats.org). La communaute HTML5 partage 
la meme approche pragmatique, consistant a developper un 
format sans trop se soucier des problemes theoriques. 

Cette attitude est consacree par le principe de « priorite des 
circonscriptions », qui dicte : « En cas de conflit, privilegiez 
d'abord les utilisateurs, puis les auteurs, puis les implement- 
eurs, puis les specificateurs, et enfin la purete theorique. » 

Ian Hickson a declare a de nombreuses reprises que ceux qui 
decidaient vraiment du contenu de THTML5 etaient les crea- 
teurs de navigateurs. En effet, si le createur d'un navigateur 
refuse de supporter une proposition particuliere, il est inutile 
d'ajouter cette proposition a la specification puisque celle-ci ne 
serait que fiction. D'apres le principe de priorite des circon- 
scriptions, nous autres web designers avons une voix plus forte 
encore : si nous refusons d'utiliser une partie de la specifica- 
tion, celle-ci est tout aussi fictive. 

SOYONS PRAGMATIQUES 

La creation de l'HTML5 est mue par une tension interne constante. 
D'un cote, la specification doit etre assez puissante pour supporter 
la creation d'applications web ; de l'autre, l'HTML5 doit etre 
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compatible avec le contenu existant, meme si celui-ci est, en 
grande partie, un foutoir sans nom. Si la specification s'egare trop 
loin dans une direction, elle subira le meme sort que le XHTML 2, 
mais si elle va trop loin dans l'autre, elle ne fera qu'enteriner les 
balises <f ont> et les tableaux, qui constituent l'essentiel de la mise 
en page de nombreuses pages web. 

II s'agit d'un equilibre fragile qui requiert une approche prag- 
matique et ponderee. 

GESTION DES ERREURS 

La specification HTML5 ne se borne pas a declarer comment les 
navigateurs doiventtraiter les balises bienformees. Pour la premiere 
fois, une specification definit egalement comment les navigateurs 
doivent se comporter avec les documents mal formes. 

Jusqu'a maintenant, les createurs de navigateurs devaient 
determiner individuellement la facon de gerer les erreurs. 
Cela consistait generalement a faire de l'ingenierie inverse a 
partir du comportement du navigateur le plus populaire, soit 
une vraie perte de temps. Les createurs de navigateurs feraient 
mieux d'implementer de nouvelles fonctionnalites au lieu de 
perdre leur temps a dupliquer les solutions des concurrents. 

Definir la gestion des erreurs dans HTML5 est une tache incroyable- 
ment audacieuse. Meme si THTML5 disposait des memes elements 
et attributs que l'HTML 4.01, sans nouvelle fonctionnalite, definir la 
gestion des erreurs d'ici a 2012 serait une tache sisypheenne. 

La gestion des erreurs ne presente peut-etre pas beaucoup 
d'interet pour les web designers, surtout si Ton ecrit des docu- 
ments valides et bien formes des le depart, mais elle est tres 
importante pour les createurs de navigateurs. Alors que les 
specifications des langages precedents etaient ecrites pour les 
auteurs, THTML5 est ecrit pour les auteurs et les implementeurs. 
Gardez cela a l'esprit quand vous parcourrez la specification. 
C'est la raison pour laquelle la specification HTML5 est si epaisse 
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et semble avoir ete ecrite avec un niveau de detail normalement 
reserve aux philatelistes ou aux champions d'echecs. 

C'EST GRAVE, DOCTYPE ? 

Une declaration de type de document, ou doctype, est tradi- 
tionnellement utilisee pour specifier le type de balisage du 
document. 

Le doctype de l'HTML 4.01 ressemble a ceci (le symbole » 
indique que la ligne se poursuit) : 

<!DOCTYPE HTML PUBLIC » 

" -//W3C//DTD HTML 4.01//EN" » 

"http: //www. w3. org/TR/html4/ strict . dtd"> 

Voici le doctype du XHTML 1.0 : 

<!DOCTYPE html PUBLIC » 

" -//W3C//DTD XHTML 1.6 Strict //EN" » 

" http : //www . w3 . org/TR/xhtmll/DTD/xhtmll- st rict . dtd" > 

Ces declarations sont difficilement comprehensibles pour vous et 
moi, mais elles ne font que dire a leur facon « ce document est ecrit 
en HTML 4.01 », ou « ce document est ecrit en XHTML 1.0 ». 

On pourrait penser que le doctype qui declare « ce document est 
ecrit en HTML5 » comporte le numero cinq quelque part, mais ce 
n'est pas le cas. Le doctype de THTML5 ressemble a cela : 

<! DOCTYPE html> 

II est si simple que meme moi, je pourrais m'en souvenir. 

Mais c'est de la folie ! Sans numero de version dans le doctype, 
comment allons-nous specifier les versions futures de l'HTML ? 
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La premiere fois que j'ai vu le doctype de l'HTMLs, j'ai pense 
que c'etait le comble de l'arrogance. Je me suis dit : « Pensent-ils 
vraiment qu'il s'agit la de la derniere specification d'un langage 
de balisage jamais ecrite ? » 

Une fois de plus, des gens semblaient convaincus qu'ils inaugu- 
raient une nouvelle ere. 

En realite, le doctype de l'HTMLs est tres pragmatique. Puisque 
l'HTMLs doit supporter le contenu existant, le doctype doit 
pouvoir s'appliquer a un document en HTML 4.01 ou en 
XHTML 1.0. Toutes les versions futures de l'HTML devront egale- 
ment supporter le contenu existant de l'HTMLs ; l'idee meme 
d'ajouter un numero de version a un document est done viciee. 

La verite, e'est que les doctypes ne sont pas vraiment impor- 
tants. Admettons que vous creiez un document avec un doctype 
HTML 4.01. Si ce document comprend un element d'une autre 
specification, comme l'HTML 3.2 ou l'HTMLs, les navigateurs 
interpreteront quand meme cette partie du document. Les navi- 
gateurs supportent les fonctionnalites, et non les doctypes. 

Les declarations de type de document etaient, a la base, desti- 
nees aux validateurs et non aux navigateurs. Un navigateur 
ne pretera attention au doctype qu'en cas de changement de 
doctype, un petit bidouillage ingenieux permettant d'alterner 
entre les modes d'affichage « quirks » et « standards », suivant la 
presence d'un doctype adequat. 

Le doctype HTML5 constitue le minimum requis pour garantir 
que les navigateurs affichent une page en mode standard. En 
fait, e'est la seule et unique raison d'inclure ce doctype. Un 
document HTML ecrit sans le doctype HTML5 peut quand 
meme etre un document HTML5 valide. 

LA SIMPLICITY MEME 

Le doctype n'est pas la seule chose a avoir ete simplifiee dans 
l'HTMLs. 
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Si vous souhaitez specifier l'encodage des caracteres d'un docu- 
ment balise, la meilleure maniere est de vous assurer que votre 
serveur envoie l'en-tete Content -Type adequat. Si vous voulez 
en etre doublement certain, vous pouvez egalement specifier le 
jeu de caracteres a l'aide d'une balise <meta>. Voici la declara- 
tion met a pour un document ecrit en HTML 4.01 : 

<meta http-equiv="Content-Type" content="text/html; » 
charset=UTF-8"> 

Voici une maniere bien plus simple de faire la meme chose en 
HTML 5 : 

<meta charset="UTF-8"> 

Comme pour le doctype, cette declaration d'encodage simpli- 
fied compte le nombre minimum de caracteres requis pour etre 
correctement interpreted par les navigateurs. 

La balise <script> pouvait egalement se permettre de perdre 
un peu de poids. On y ajoute couramment un attribut type avec 
la valeur « text/javascript ». 

<script type="text/javascript" src="file. js"x/script> 

Les navigateurs n'ont pas besoin de cet attribut. lis partiront du 
principe que le script est ecrit en JavaScript, le langage de script 
le plus populaire du Web (et soyons honnetes : le seul langage 
de script du Web) : 

< script src="f ile. js"x/script> 

De meme, il est inutile de donner la valeur « text/ess » a l'attribut 
type pour appeler un fichier CSS : 

•clink rel="stylesheet" type="text/css" href="-File.css"> 

Vous pouvez simplement ecrire : 

<link rel="stylesheet" href ="f ile . css"> 
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SYNTAXE : BALISER LE SENTIER 

Certains langages de programmation, comme Python, imposent 
une facon particuliere d'ecrire des instructions : il est obliga- 
toire d'indenter le code. D'autres langages de programmation, 
comme le JavaScript, ne pretent pas attention au formatage ; 
l'indentation est done facultative. 

Si vous cherchez a passer une soiree divertissante a moindre 
frais, mettez une bande de programmeurs dans la meme piece 
et prononcez les mots « indentation obligatoire » Delectez-vous 
des heures de flaming qui s'ensuivent. 

Une question philosophique fondamentale est au cceur du debat 
sur l'indentation : un langage doit-il imposer un style d'ecriture 
particulier, ou les auteurs doivent-ils etre libres d'ecrire dans le 
style qui leur convient ? 

Dans les langages de balisage, l'indentation est optionnelle. Si 
vous souhaitez aller a la ligne et ajouter une indentation a chaque 
fois que vous inserez un element, grand bien vous fasse, mais 
les navigateurs et les validateurs n'en ont pas besoin. Cela ne 
veut pas dire que le balisage est une grande foire d'empoigne. 
Certains langages de balisage imposent un style d'ecriture plus 
strict que d'autres. 

Avant le XHTML 1.0, la casse etait sans importance pour le format 
des balises. Il n'etait pas obligatoire de placer les attributs entre 
guillemets. On pouvait meme ne pas fermer certaines balises. 

Le XHTML 1.0 applique la syntaxe du XML. Toutes les balises 
doivent etre ecrites en minuscules, tous les attributs doivent 
etre delimites par des guillemets, et tous les elements doivent 
comprendre une balise de fermeture. Dans le cas particulier des 
elements autonomes comme br, la balise de fermeture obliga- 
toire est remplacee par une barre de fermeture oblique : <br />. 

Avec THTML5, tout est possible. Majuscules, minuscules, avec 
ou sans guillemets, balise auto-fermante ou non : e'est a vous 
de decider. 



LES PRINCIPES DE L'HTMLS 15 



J'utilise le doctype XHTML 1.0 depuis des annees. J'aime le fait 
de devoir ecrire dans un style particulier, et j'aime la facon dont 
le validateur W3C applique ce style. Maintenant que j'utilise 
l'HTML.5, c'est a moi de choisir le style qui me convient. 

Je comprends pourquoi certaines personnes redoutent les 
approximations de la syntaxe de THTML5. Elles ontl'impression 
de tourner le dos a des annees de bonnes pratiques. Certains 
disent meme que la syntaxe laxiste de THTML5 favorise 
le mauvais balisage. Je ne pense pas que ce soit vrai, mais je 
comprends cette inquietude. C'est un peu comme si un langage 
de programmation qui appliquait l'indentation obligatoire 
devenait subitement plus indulgent. 

Pour ma part, je n'ai pas de probleme avec la syntaxe decon- 
tractee de l'HTMLs. J'ai fini par assumer le fait de devoir appli- 
quer moi-meme mon propre style d'ecriture prefere, mais 
j'aimerais voir plus d'outils me permettant de l'evaluer par 
rapport a un style particulier. Dans le monde de la program- 
mation, cela s'appelle un outil lint : un programme signalant 
les pratiques de programmation suspectes. Un outil lint pour le 
balisage serait different d'un validateur, qui compare le code a 
un doctype. L'ideal serait de pouvoir combiner les deux outils 
en une super machine a tout faire. 

Quiconque programmera un tel appareil gagnera le respect et 
l'admiration eternels de tous les web designers. 

ON N'UTILISE PAS CE GENRE DE LANGAGE 

Dans les versions precedentes de l'HTML, le procede consis- 
tant a supprimer de la specification un element ou un attribut 
existant auparavant etait appele depreciation. On conseillait 
aux web designers de ne pas utiliser d'elements deprecies, de 
ne pas leur envoyer de carte de vceux a Noel, ni meme de les 
evoquer pendant les repas de famille. 
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II n'y a pas d'elements ni d'attributs deprecies dans THTML5, 
mais il y a de nombreux elements et attributs obsoletes. 

Non, ce n'est pas un abus de politiquement correct. Il existe une 
subtile difference de sens entre « obsolete » et « deprecie ». 

Puisque THTML5 vise a etre compatible avec le contenu existant, 
la specification doit reconnaitre les elements existant aupara- 
vant, meme quand ceux-ci ne font plus partie de FHTML5. On 
aboutit a une situation legerement confuse, oil la specifica- 
tion dit simultanement « auteurs, n'utilisez pas cet element » 
et « navigateurs, voici comment interpreter cet element ». Si 
l'element etait deprecie, il ne serait pas mentionne du tout dans 
la specification, mais puisqu'il est obsolete, il est inclus pour les 
besoins des navigateurs. 

A moins que vous ne fabriquiez un navigateur, vous pouvez 
traiter les elements et les attributs obsoletes de la meme facon 
que les elements et les attributs deprecies : ne les utilisez pas 
dans vos pages web et ne les invitez pas pour prendre l'apero. 

Si vous tenez a utiliser un element ou un attribut obsolete, votre 
document sera « non conforme ». Les navigateurs l'interpreteront 
convenablement, mais vous serez la risee du Web. 

Adieu, content de t'avoir connu 

Les elements frame, frameset et noframes sont rendus 
obsoletes. lis ne nous manqueront pas. 

L'element acronym est rendu obsolete, nous faisant ainsi gagner 
des annees de discussion qui seraient plus utilement depensees a 
calculer le taux de disparition des petites cuilleres dans les restau- 
rants d'entreprise. Ne pleurez pas l'element acronym ; utilisez 
simplement l'element abbr. Oui, je sais qu'il existe une difference 
entre les acronymes et les abreviations : les acronymes se pronon- 
cent comme un seul mot, a l'instar de l'OTAN ou du laser. Rappelez- 
vous seulement que tous les acronymes sont des abreviations, 
mais que toutes les abreviations ne sont pas des acronymes. 
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Les elements de presentation, comme font, big, center et 
strike sont rendus obsoletes en HTML5. En realite, ils sont 
obsoletes depuis des annees ; il est bien plus simple d'obtenir 
les memes effets de presentation a l'aide de proprietes CSS 
comme font-size et text-align. De meme, les attributs de 
presentation comme bgcolor, cellspacing, cellpadding et 
valign sont obsoletes. Utilisez plutot CSS. 

Tous les elements de presentation ne sont pas obsoletes. 
Certains ont suivi un programme de reeducation et on leur a 
donne une nouvelle chance. 

TURN AND FACE THE STRANGE (CH-CH-CHANGES) 

L'element big est obsolete, mais pas l'element small. Cette 
incoherence apparente a ete resolue en redefinissant small. 
Il a perdu sa fonction stylistique « afficher ce texte en petite 
taille ». Il possede maintenant la valeur semantique « voici des 
petits caracteres », pour le jargon juridique ou les conditions 
d'utilisation. 

Evidemment, neuf fois sur dix, vous voudrez afficher les petits 
caracteres en petite taille. Il faut simplement comprendre que 
l'aspect purement cosmetique de l'element a ete supplante. 

Avant, l'element b voulait dire « afficher ce texte en gras ». Il 
est maintenant utilise pour qu'une portion de texte soit « stylis- 
tiquement decalee de la prose normale sans exprimer une 
importance supplementaire ». Si le texte est effectivement plus 
important, l'element strong sera plus approprie. 

De meme, l'element i ne veut plus dire « afficher ce texte en ital- 
ique ». Il signifie que le texte est « dans une voix ou une humeur 
alternative ». Une fois de plus, l'element n'implique pas d'importance 
particuliere ou d'emphase. Pour l'emphase, utilisez l'element em. 

Ces changements peuvent sembler jouer sur les mots. C'est 
effectivement le cas, mais ils aident egalement a ameliorer 
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l'universalite de THTML5. Si vous reflechissez aux mots « gras » 
et « italique », ceux-ci n'ont de sens que pour un support visuel 
comme un ecran ou une page. En enlevant l'aspect visuel de la 
definition des elements, la specification reste utile pour les user 
agents non visuels, tels que les lecteurs d'ecran. Cela encourage 
egalement les designers a penser au-dela des environnements 
de rendu visuel. 

Illi-cite 

L'element cite aete redefini dans THTML5. Alors qu'il designait 
precedemment une « reference a d'autres sources », il signifie 
maintenant « le titre d'une ceuvre ». Bien souvent, la reference 
citee sera le titre d'un livre ou d'un film, mais la source peut 
tout aussi bien etre une personne. Avant THTML5, on pouvait 
baliser le nom de cette personne avec cite. C'est maintenant 
expressement interdit, et tant pis pour la retrocompatibilite. 

La justification de cette ceuvre de revisionnisme tient dans ce 
raisonnement : les navigateurs mettent en italique le texte situe 
entre deux balises <cite> ; le titre d'une ceuvre est generale- 
ment en italique ; le nom d'une personne n'est generalement 
pas en italique ; done l'element cite ne doit pas etre utilise pour 
baliser le nom d'une personne. 

C'est trop injuste. Je suis favorable a ce que THTML5 s'inspire 
des navigateurs, mais la, c'est la queue qui remue le chien. 

Heureusement, aucun validateur ne peut determiner si le texte 
situe entre les balises <cite> fait reference a une personne ou 
non. Rien ne nous empeche done d'utiliser l'element cite de 
maniere sensee et retrocompatible. 

L'element a gonfle aux hormones 

Alors que certains changements jouent franchement sur les mots, 
un element subit une transformation radicale avec THTML5. 
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L'element a est, sans conteste, l'element le plus important de 
l'HTML. II transforme notre texte en hypertexte. II forme le 
tissu conjonctif du World Wide Web. 

L'element a a toujours ete un element de type en-ligne (inline). 
Si vous vouliez creer un lien a partir d'un titre et d'un para- 
graphe, vous deviez utiliser plusieurs elements a : 

<h2xa href="/about">About me</ax/h2> 

<pxa href="/about">Find out what makes me tick. </ax/p> 

En HTML5, vous pouvez envelopper plusieurs elements dans 
un seul element a : 

<a href="/about"> 
<h2>About me</h2> 

<p>Find out what makes me tick.</p> 
</a> 

La seule chose qu'on ne peut pas faire, c'est inserer un element 
a dans un autre element a. 

Cela pourrait sembler etre un changement radical, mais les 
navigateurs n'auront pas grand chose a faire pour supporter ce 
nouveau modele d'hyperlien. lis le supportent deja, meme si ce 
type de balise n'etait pas techniquement legal jusqu'a present. 

Cela parait legerement contre-intuitif : les navigateurs ne 
devraient-ils pas implementer une specification existante ? Au 
contraire, la nouvelle specification documente ce que les navi- 
gateurs font deja. 



DE NOUVEAUX JOUJOUX : LES API JAVASCRIPT 

Pour la documentation de CSS, il y a les specifications CSS ; 
pour la documentation de l'HTML, les specifications HTML. 
Mais ou se trouve done la documentation des API JavaScript 
comme document .write, innerHTML et window, history ? La 
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specification JavaScript ne traite que du langage de programma- 
tion - vous n'y trouverez rien sur les API. 

Jusqu'a present, les navigateurs creaient et implementaient les 
API JavaScript de maniere independante, tout en regardant 
par-dessus l'epaule des concurrents. I/HTML5 va documenter 
ces API une bonne fois pour toutes, ce qui devrait garantir une 
meilleure compatibility. 

II peut paraitre bizarre d'inclure la documentation JavaScript 
dans la specification d'un langage de balisage, mais rappelez- 
vous que THTML5 est ne de Web Apps 1.0. JavaScript est un 
composant indispensable des applications web. 

Des sections entieres de la specification HTML5 sont consacrees 
aux nouvelles API pour la creation d'applications web. On y 
trouve Undo-Manager, qui permet au navigateur de suivre les 
changements apportes a un document. II y a une section sur la 
creation d'applications web hors-ligne a l'aide d'une memoire 
cache. Le glisser-deposer y est decrit en detail. 

Comme toujours, s'il existe deja une implementation, la speci- 
fication construira sur ses bases plutot que de reinventer la 
roue. L'Internet Explorer de Microsoft utilise une API de glis- 
ser-deposer depuis des annees, qui a done servi de base pour 
le glisser-deposer de FHTML5. Malheureusement, FAPI de 
Microsoft est, pour rester poli, problematique. II peut etre bon 
de reinventer la roue si celle-ci est carree... 

Les API de THTML5 sont tres puissantes. D'ailleurs, elles me 
passent completement au-dessus de la tete. Je laisserai done les 
developpeurs plus intelligents que moi detailler le sujet : ces 
API meritent un livre a elles seules. 

En attendant, il reste plein de trues nouveaux dans THTML5 
avec lesquels nous autres web designers allons pouvoir nous 
amuser. La fete commence au tout prochain chapitre. 
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L'histoire du Web est ponctuee d'ameliorations technologiques. 
L'un des tout premiers ajouts a l'HTML fut 1'eleirient img, qui 
a fondamentalement tranforme le Web. L'introduction du 
JavaScript permit ensuite au Web de devenir un environnement 
plus dynamique. Par la suite, la proliferation d'Ajax fit du Web 
une option viable pour creer de veritables applications. 

Les normes du Web ont tellement evolue qu'il est maintenant 
possible de construire pratiquement n'importe quoi a l'aide de 
l'HTML, de CSS et de JavaScript. Pratiquement. 

Quelques couleurs manquent a la palette des normes du Web. 
Si vous souhaitez publier du texte et des images, l'HTML et CSS 
feront l'affaire. Toutefois, si vous voulez publier de l'audio ou de la 
video, il vous faut utiliser un plug-in comme Flash ou Silverlight. 

Ces « plug-ins », ou modules d'extension, aident a combler les 
failles du Web. lis permettent de publier des jeux, des films et 
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de la musique en ligne, assez facilement. Mais ces technologies 
ne sont pas ouvertes. Elles ne sont pas creees par la commu- 
naute. Elles sont sous le controle d'entreprises independantes. 

Flash est une technologie puissante, mais l'utiliser revient 
parfois a pactiser avec le diable. Nous gagnons la possibilite de 
publier des medias riches sur le Web, mais nous perdons ainsi 
une partie de notre independance. 

I/HTML5 est en train de combler ces lacunes. Ce faisant, il est en 
competition directe avec des technologies proprietaries comme 
Flash et Silverlight. Sauf qu'en HTML5, les medias riches sont inter- 
pretes de facon native par le navigateur, sans l'aide d'un plug-in. 

CANVAS 

Quand le navigateur Mosaic a apporte la possibilite d'integrer des 
images sur des pages web, il a donne un nouvel essor au Web, mais 
ces images sont depuis restees statiques. On peut certes creer des 
gif animes ; on peut utiliser JavaScript pour changer le style d'une 
image ; on peut generer une image de maniere dynamique sur le 
serveur, mais des lors qu'une image a ete chargee par un naviga- 
teur, son contenu ne peut plus etre modifie. 

L'element canvas constitue un environnement permettant de 
creer des images dynamiques. 

L'element lui-meme est tres simple. Il suffit d'en specifier les 
dimensions dans la balise d'ouverture : 

<canvas id="mon-premier-canvas" width="360" height="240"> 
</canvas> 

Si vous mettez quoi que ce soit entre les balises d'ouverture et 
de fermeture, seuls les navigateurs ne supportant pas l'element 
canvas le verront (fig 3.01) : 
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<canvas id="mon-premier-canvas" width="360" height="240"> 
<p>Votre navigateur ne supporte pas 1 J element canvas ? » 
Voici une image classique :</p> 
<img src="chiot . jpg" alt="un mignon petit chien"> 

</canvas> 



fig 3.01 : Les utilisateurs dont 
le navigateur ne supporte 
pas I'element canvas verront 
I'image d'un mignon petit 
chien-chien. 



Votre navigateur ne supporte pas I'element 
canvas ? Voici une image classique : 




Le gros du travail se fait en JavaScript. Tout d'abord, vous 
devez referencer I'element canvas et son contexte. Ici, le mot 
« contexte » designe simplement API. Pour le moment, le seul 
contexte disponible est bidimensionnel : 

var canvas = document .getElementById( 'mon-premier-canvas ' ); 
var context = canvas . getContext( ' 2d ') ; 

Vous pouvez maintenant commencer a dessiner sur la surface 
bidimensionnelle de I'element canvas a l'aide de l'API docu- 
mented dans la specification HTML5 a cette adresse : http:// 
bkaprt.com/htm I5/1 1 . 

L'API 2D offre grosso modo les memes outils que les programmes 
de creation graphique comme Illustrator : traits, remplissage, 

1. Adresse complete : http://www.whatwg.org/specs/web-apps/current-work/ 
multipage/the-canvas-element.html 
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ombres, formes et courbes de Bezier. La difference reside dans 
le fait qu'au lieu d'utiliser une interface graphique, tout doit etre 
specifie a l'aide de JavaScript. 

Dessiner avec des lignes de code : une partie de plaisir 

Voici comment specifier que le trait doit etre de couleur rouge : 

context. strokeStyle = '#990006' ; 

Maintenant, tout ce que vous dessinerez aura un contour rouge. 
Par exemple, voici la syntaxe pour dessiner un rectangle : 

strokeRect ( gauche, haut, largeur, hauteur ) 

Si vous voulez dessiner un rectangle de 100 par 50 pixels, place a 
20 pixels de la gauche et a 30 pixels du haut de l'element canvas, 
vous ecrirez (fig 3.02) : 

context . strokeRect (20, 30, 100, 50) ; 



fic 3.02 : Un rectangle, 
dessine avec l'element canvas. 



C'est un exemple tres simple. L'API 2D offre beaucoup d'autres 
methodes : f illStyle, fillRect, lineWidth, shadowColor et 
bien d'autres encore. 

En theorie, une image qui peut etre creee dans un programme 
comme Illustrator peut etre creee avec l'element canvas. Dans 
la pratique, ce serait extremement laborieux et donnerait un 
code JavaScript excessivement long. Et d'ailleurs, ce n'est pas 
vraiment l'objet de cet element. 
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Canvas, pour quoi faire ? 

C'est tres bien de pouvoir utiliser JavaScript et 1'element canvas 
pour creer des images a la volee, mais a moins d'etre un irre- 
ductible masochiste, a quoi bon ? 

Le vrai pouvoir de relement canvas, c'est que son contenu peut 
etre modifie et redessine a tout moment, selon les actions de 
l'utilisateur. Cette possibility permet de creer des outils et des 
jeux qui auraient auparavant requis un plug-in comme Flash. 

L'une des premieres demonstrations de force de 1'element 
canvas fut l'ceuvre de Mozilla Labs. L'application Bespin 
(https://bespin.mozilla.com) est un editeur de code fonction- 
nant directement dans le navigateur (fic 3.03). 

C'est une application tres puissante, tres impressionnante. C'est 
aussi l'exemple type de ce qu'il ne faut pas faire avec 1'element 
canvas. 



readme.txt - editing with Bespin 


| A 


| ► 1 j A | A 1 \*~"\ 1 + |{}https://be&pin. mozilla, comy'ediEor.hlml#pi C | (^"Google ) [W] 


BeSpill > iarnpleProject - readme.brt > » U © AAA 


1 




z 




3 










* To jump between the command Tine and the editor, simply hit Ctrl-J 




* To turn on "strictlines" mode, which means that you can't click anywhere in the 




Check out: 




* FAQ: https://wiki.mozilla.org/Lal5s/Bespin/FAQ 




* Our initial announcement: http://labs.mozilla.com/2fl0S/02/introducing-bespin 







fic 3.03 : L'application Bespin, construite avec 1'element canvas. 



26 HTML5 POUR LES WEB DESIGNERS 



Acces refuse 

Un editeur de code, par sa nature, manie du texte. L'editeur de 
code Bespin manie le texte contenu dans un element canvas, 
sauf que ce n'est plus vraiment du texte, mais une suite de 
formes qui ressemble a du texte. 

Sur le Web, chaque document peut etre decrit par un Document 
Object Model (DOM). Ce DOM peut comporter de nombreux 
nceuds differents, les plus importants etant les elements, le 
texte et les attributs. Ces trois blocs de construction suffisent 
a assembler a peu pres n'importe quel document. L'element 
canvas n'a pas de DOM, le contenu dessine ne peut done pas 
etre represents sous la forme d'une arborescence de nceuds. 

Les lecteurs d'ecran et d'autres technologies d'accessibilite 
dependent de 1'acces a un DOM pour interpreter un document. 
Pas de DOM, pas d'acces. 

Le manque d'accessibilite de l'element canvas est un gros 
probleme pour THTML5. Heureusement, quelques personnes 
avisees ont forme une task force pour trouver des solutions 
(http://bkaprt.eom/htmls/2) 1 . 

L'accessibilite de l'element canvas est une question importante, 
et je ne voudrais pas d'une solution baclee. En meme temps, 
je ne veux pas non plus que cet element retarde le reste de la 
specification HTML5. 

Canvas fute 

Tant que ce manque d'accessibilite n'est pas regie, on peut 
penser que les web designers doivent s'interdire d'utiliser 
l'element canvas. Ce n'est pas forcement le cas. 

Chaque fois que j'utilise JavaScript sur un site web, e'est en 
tant qu'amelioration. Les visiteurs n'utilisant pas JavaScript 

1. Adresse complete : http://www.w3.org/WAI/PF/html-task-force 
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ont quand meme acces a tout le contenu, meme si leur experi- 
ence n'est pas aussi dynamique que dans un environnement 
JavaScript. Cette approche a plusieurs niveaux, appelee 
JavaScript discret, peut egalement s'appliquer a canvas. Plutot 
que de l'utiliser pour creer du contenu, on l'utilise pour recy- 
cler le contenu existant. 

Supposons que vous ayez un tableau rempli de donnees, et 
que vous souhaitiez illustrer les tendances de ces donnees 
par un graphique. Si les donnees sont statiques, vous pouvez 
generer un graphique, par exemple avec l'API Google Chart. En 
revanche, si les donnees changent en reaction a des evenements 
declenches par l'utilisateur, canvas est l'outil ideal pour generer 
un graphique dynamique. En plus, le contenu represente 
dans l'element canvas est deja accessible dans l'element table 
preexistant. 

Les grosses tetes du Filament Group ont mis au point le 
plug-in jQuery pour cette situation particuliere (fig 3.04 ; 
http://bkaprt.eom/html5/3 1 ). 




fig 3.04 : Utilisation de l'element canvas pour generer un graphique a partir de 
donnees entrees par l'utilisateur. 



1. Adresse complete : http://www.filamentgroup.com/lab/update_to_jquery. 
visualize_accessible_charts_with_html5_from_designing_with/ 
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II existe une autre option, canvas n'est pas la seule API permet- 
tant de generer des images dynamiques. SVG, pour Scalable 
Vector Graphics, est un format XML pouvant decrire le meme 
genre de formes que canvas. Puisque le XML est un format de 
donnees textuel, le contenu du SVG est theoriquement valable 
pour les lecteurs d'ecran. 

Dans les faits, le SVG n'a pas captive l'imagination des 
developpeurs comme canvas. Meme si canvas est un petit 
nouveau, il beneficie deja d'une large compatibilite. Safari, 
Firefox, Opera et Chrome le supportent deja. Il y a meme une 
librairie JavaScript qui permet a Internet Explorer de l'utiliser 
(http://bkaprt.eom/html5/4 1 )- 

Vu les mantras « paver le sentier des vaches » et « ne pas rein- 
venter la roue », on pourrait trouver bizarre que le WHATWG 
recommande l'element canvas pour FHTML5 alors que le SVG 
existe deja. Comme souvent, la specification HTML5 ne fait que 
documenter ce que les navigateurs font deja. L'element canvas 
n'a pas ete cree pour l'HTMLs ; il a ete cree par Apple et imple- 
ments dans Safari. D'autres createurs de navigateurs ont vu ce 
qu'Apple faisait, l'ont aime, et recopie. 

Cela semble peu methodique, mais e'est de la que viennent la 
plupart des normes du Web. Microsoft, par exemple, a cree 
l'objet XMLHttpRequest pour Internet Explorer 5 a la fin du 
xx e siecle. Dix ans plus tard, tous les navigateurs supportent 
cette fonctionnalite, qui fait maintenant l'objet d'un brouillon 
de travail en dernier appel au W3C. 

Dans le monde darwinien des navigateurs web, canvas se 
reproduit un peu partout. S'il parvient a evoluer vers plus 
d'accessibilite, sa survie est assuree. 



1. Adresse complete : http://code.google.eom/p/explorercanvas/ 
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AUDIO 



Le tout premier site que j'ai cree etait une vitrine pour mon groupe de 
musique. Je voulais que les visiteurs du site puissent ecouter les chan- 
sons du groupe. J'ai done etudie les nombreux formats et lecteurs qui 
se disputaient mon attention : QuickTime, Windows Media Player, 
Real Audio. J'ai passe beaucoup trop de temps a me soucier des parts 
de marche relatives et de la compatibilite entre plateformes. 

Entre-temps, le format MP3 a gagne la bataille de l'ubiquite. 
Mais pour offrir a nos visiteurs une facon simple d'ecouter un 
fichier sonore, il faut tout de meme utiliser une technologie 
proprietaire. Le lecteur Flash a gagne cette bataille-la. 

Et maintenant, voila que THTML5 monte sur le ring pour tenter 
de detroner le champion en titre. 

Il est extremement simple d'inserer un fichier audio dans un 
document HTML5 : 

< audio s rc=" wit chit a lineman .mp3"> 
</audio> 

C'est un peu trop simple. Vous voudrez probablement etre plus 
specifique quant au comportement du fichier sonore. 

Imaginons qu'il existe un immonde salaud qui deteste le Web 
et tous ceux qu'on y croise. Il se fiche probablement de savoir 
qu'il est incroyablement grossier et stupide d'inserer un fichier 
audio qui demarre automatiquement. Grace a l'attribut auto- 
play, de tels actes de malveillance sont possibles : 

<audio src="witchitalineman.mp3" autoplay> 
</audio> 

Si jamais vous utilisez l'attribut autoplay de cette facon, je 
devrai vous abattre. 

Remarquez que l'attribut autoplay ne prend pas de valeur. C'est un attribut 
booleen, du nom du grand mathematicien de Cork, George Boole. 
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La logique informatique est entierement basee sur la logique 
booleenne : un courant electrique passe, ou ne passe pas ; 
une valeur binaire est egale a un ou a zero ; le resultat d'une 
comparaison est « vrai » ou « faux ». 

Ne confondez pas les attributs booleens et les valeurs boole- 
ennes. II serait logique de penser qu'un attribut booleen prend 
les valeurs « true » ou « false ». En fait, c'est l'existence meme de 
l'attribut qui est booleenne par nature : soit l'attribut est inclus, 
soit il ne Test pas. Ecrire autoplay="f alse" ou autoplay="non 
merci" revient a ecrire autoplay. 

Si vous affectionnez la syntaxe du XHTML, vous pouvez ecrire 
autoplay="autoplay". Solution offerte par le Service de la 
repetition redondante. 

Si l'idee d'imposer votre fichier audio au demarrage ne vous 
parait pas assez diabolique, vous pouvez infliger encore plus 
de souffrance en le jouant en boucle. Un autre attribut booleen, 
appele loop, tient ce role perfide : 

oudio src="witchitalineman.mp3" autoplay loop> 
</audio> 

Si vous utilisez l'attribut loop avec l'attribut autoplay, je devrai 
vous abattre deux fois. 

Hors de controle 

L'element audio peut representer une benediction comme une 
malediction. Il peut etre judicieux de laisser a l'utilisateur le 
controle de la lecture du fichier audio. C'est ce qu'on fait avec 
l'attribut booleen controls : 

oudio src="witchitalineman.mp3" controls> 
</audio> 

La presence de l'attribut controls invite le navigateur a afficher 
des controles natifs pour lire et mettre l'audio en pause, ainsi 
qu'ajuster le volume (fig 3.05). 
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fic 3.05 : Utilisez controls pour afficher 
les controles de lecture et du volume de 
votre fichier audio. 
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Si les controles natifs du navigateur ne vous conviennent pas, 
vous pouvez creer les votres. Avec JavaScript, vous pouvez 
interagir avec l'API Audio, qui vous donne acces a des methodes 
comme play et pause, et a des proprietes comme volume. 
Voici un exemple vite fait mal fait avec des elements button et 
d'horribles gestionnaires d'evenement (fig 3.06) : 

<audio id="player" src="witchitalineman.mp3"> 

</audio> 

<div> 

< button » 

one lie k=" document .get Element By Id ( ' player ' ) . play( ) "> » 
Play 

</button> 
< button » 

onclic k= "document .get Element By Id ( ' player ' ) . pause ( ) "> » 

Pause 

</button> 

< button » 

onclic k= "document .get Element By Id ( ' player ' ) . volume » 

+= 0.1" > 

Volume Up 

</button> 

< button » 

onclic k= "document .get Element By Id ( ' player ' ) . volume » 
-= 0.1"> 
Volume Down 
</button> 



</div> 



fig 3.06 : Les controles obtenus 
avec les elements button. 
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Mise en memoire tampon 



A un stade, la specification HTML5 comprenait un autre attribut 
booleen pour Lelement audio. L'attribut autobuffer etait plus 
poli et prevenant que l'affreux autoplay. II permettait aux 
auteurs de dire aux navigateurs que, meme si le fichier audio ne 
devait pas demarrer automatiquement, il allait sans doute etre 
lu a un moment ou a un autre, et que le navigateur devait done 
commencer a le charger en arriere-plan. 

Cet attribut aurait pu etre utile, mais Safari a malheureusement 
depasse les bornes, decidant de charger les fichiers audio sans se 
preoccuper de la presence de l'attribut autobuffer. Souvenez- 
vous que, comme autobuffer etait un attribut booleen, il etait 
impossible de demander a Safari de ne pas precharger 1'audio : 
autobuffer="f alse" revenait a ecrire autobuffer="true" ou 
n'importe quelle autre valeur (http://bkaprt.eom/html5/5 1 ). 

L'attribut autobuffer a maintenant ete remplace par l'attribut 
preload. Ce n'est pas un attribut booleen. Il peut prendre 
trois valeurs differentes : none, auto et metadata. Avec 
preload— " none" y vous pouvez maintenant demander expli- 
citement aux navigateurs de ne pas precharger 1'audio : 

oudio src="witchitalineman.mp3" controls preload="none"> 

</audio> 

Si vous n'avez qu'un seul element audio sur une page, vous 
pouvez utiliser preload="auto", mais plus il y aura d'elements 
audio en prechargement, plus la bande passante de vos visi- 
teurs s'en trouvera saturee. 

Joue comme ci, joue comme ca 

L'element audio semble quasiment parfait. Il doit bien y avoir 
une complication quelque part ? Eh oui. 



1. Adresse complete : https://bugs.webkit.org/show_bug.cgi7ids2S267 
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Le probleme de l'element audio ne se trouve pas dans la speci- 
fication. Le probleme vient des formats audio. 

Bien que le format MP3 soit devenu omnipresent, ce n'est pas 
un format ouvert. Le format etant brevete, les technologies 
ne peuvent decoder les fichiers MP3 sans en payer les droits. 
Sans probleme pour les grandes entreprises comme Apple ou 
Adobe, plus difficilement pour les plus petites ou les groupes 
open-source. Ainsi, Safari jouera volontiers des fichiers MP3, 
au contraire de Firefox. 

II existe d'autres formats audio. Le codec Vorbis (generalement 
sous la forme d'un fichier . ogg) n'est perclus d'aucun brevet. 
Firefox supporte le format Ogg Vorbis, mais... pas Safari. 

Heureusement, il existe une autre facon d'utiliser l'element 
audio sans avoir a faire un choix cornelien entre deux formats. 
Plutot que d'utiliser l'attribut src dans la balise <audio> 
d'ouverture, vous pouvez specifier plusieurs formats a l'aide de 
l'element source : 

oudio controls> 

< source s rc=" witch it alineman .ogg" > 

<source src="witchitalineman .mp3"> 
</audio> 

Un navigateur pouvant lire les fichiers Ogg Vorbis s'arretera au 
premier element source. Un navigateur pouvant lire les fichiers 
MP3, mais pas les fichiers Ogg Vorbis, sauterale premier element 
source et jouera le fichier du deuxieme element source. 

Vous pouvez aider les navigateurs en precisant les types MIME 
de chaque fichier source : 

oudio controls) 

<source src="witchitalineman.ogg" type="audio/ogg"> 
<source src="witchitalineman.mp3" type="audio/mpeg"> 

</audio> 
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L'element source est un element autonome ; par consequent, 
si vous utilisez la syntaxe XHTML, assurez-vous d'inclure une 
barre oblique a la fin de chaque balise < sou nee />. 

Solution de secours 

La possibility de specifier de multiples elements source est 
tres utile, mais certains navigateurs ne supportent pas du tout 
l'element audio a l'heure actuelle. Vous avez devine de quel 
navigateur je parlais ? 

Internet Explorer et ses semblables doivent etre nourris a la 
petite cuillere, a l'ancienne, via Flash. Le modele de contenu de 
l'element audio le permet. Tout ce qui est situe entre les balises 
<audio> et qui n'est pas un element source sera expose aux 
navigateurs qui ne comprennent pas l'element audio : 

oudio controls) 

<source src="witchitalineman . ogg" type="audio/ogg"> 
<source src="witchitalineman.mp3" type="audio/mpeg"> 
<object type="application/x-shockwave-f lash" » 
data= "player. swf?soundFile=witchitalineman.mp3"> 
<param name="movie" » 

value= "player. swf ? sound File=witchitalineman.mp3"> 
</object> 

</audio> 

Dans cet exemple, l'element object ne sera visible qu'aux navi- 
gateurs ne supportant pas l'element audio. 

On peut meme aller plus loin. L'element object vous permet 
egalement d'inclure une solution de secours. Cela signifie que 
vous pouvez toujours fournir un bon vieil hyperlien en dernier 
recours : 

oudio controls) 

<source src="witchitalineman . ogg" type="audio/ogg"> 
<source src="witchitalineman.mp3" type="audio/mpeg"> 
<object type="application/x-shockwave-f lash" » 
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dat a=" play er . swf ? sound File=witchitalineman . mp3"> 
<param name="movie" » 

value= "player. swf ? sound File=witchitalineman . mp3"> 
<a href="witchitalineman.mp3">Telecharger la chanson</ 

a> 

</object> 
</audio> 

Cet exemple comprend quatre niveaux de degradation 
progressive : 

• Le navigateur supporte l'element audio et le format Ogg Vorbis. 

• Le navigateur supporte l'element audio et le format MP3. 

• Le navigateur ne supporte pas l'element audio mais le plug-in Flash 
est installe. 

• Le navigateur ne supporte pas l'element audio et le plug-in Flash est 
absent. 

Acces complet 

Le modele de contenu de l'element audio est tres utile pour 
fournir un contenu de secours. Un contenu de secours est 
different d'un contenu d'accessibilite. 

Supposons qu'une transcription accompagne le fichier audio. 
Voici la marche a ne pas suivre : 

<audio controls) 

<source src="witchitalineman.ogg" type="audio/ogg"> 
<source src="witchitalineman.mp3" type="audio/mpeg"> 
<p>I am a lineman for the county. . .</p> 

</audio> 

La transcription ne sera visible que pour les navigateurs ne 
supportant pas l'element audio. Cette solution ne risque pas 
d'aider un utilisateur sourd dote d'un bon navigateur. D'ailleurs, 
ledit contenu d'accessibilite est souvent tres utile pour tout le 
monde, alors pourquoi le cacher ? 
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oudio controls) 

<source src="witchitalineman . ogg" type="audio/ogg"> 
<source src="witchitalineman.mp3" type="audio/mpeg"> 

</audio> 

<p>I am a lineman for the county. . .</p> 

VIDEO 

Si Favenement du support natif des fichiers audio dans les naviga- 
teurs est enthousiasmant, le support natif de la video fait saliver 
les web designers d'avance. Grace a l'augmentation de la bande 
passante, la video est de plus en plus repandue. Le plug-in Flash est 
pour le moment la technologie de choix pour afficher des videos 
sur le Web, mais THTML5 pourrait bien changer la donne. 

L'element video fonctionne tout comme l'element audio. II 
comprend les attributs optionnels autoplay, loop et preload. 
On peut specifier l'emplacement de la video avec l'attribut src 
de l'element video, ou en placant des elements source entre 
les balises <video>. Vous pouvez laisser au navigateur le soin 
de fournir une interface utilisateur avec 1'attribut controls, ou 
vous pouvez scripter vos propres controles. 

La principale difference entre le contenu audio et le contenu video, 
c'est que les films, par nature, prennent plus de place sur l'ecran. 
Vous voudrez done sans doute preciser des dimensions : 

<video src="f ilm.mp4" controls width="360" height="240"> 

</video> 

Vous pouvez choisir une image representative de la video et 
demander au navigateur de l'afficher a l'aide de l'attribut poster 
(fig 3.07) : 

<video src="f ilm.mp4" controls width="360" » 
height ="240" poster="apercu. jpg"> 

</video> 
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fig 3.07 : Cet apercu est 
affiche a I'aide de I'attribut 
poster. 




10 ► 



La guerre des formats video concurrents est encore plus 
sanglante que celle des formats audio. Parmi les acteurs prin- 
cipaux, citons MP4, qui est brevete, et Theora Video, qui ne 
Test pas. Une fois de plus, vous devrez proposer des encodages 
alternatifs et un contenu de secours : 

<video controls width="360" height="240" » 
poster=" apercu . jpg" > 

<source src="film.ogv" type="video/ogg"> 
<source src="film.mp4" type="video/mp4"> 
<object type="application/x-shockwave-f lash" » 
width="360" height="240" » 
data=" player. swf ?f ile=film.mp4"> 
<param name="movie" » 
value=" player . swf ?f ile=f ilm.mp4"> 
<a href="film.mp4">Telecharger le film</a> 
</object> 
</video> 

Les auteurs de la specification HTML5 esperaient a l'origine specifier 
un niveau de reference pour le support des formats. Helas, les crea- 
teurs de navigateurs ne pouvaient s'accorder sur un seul format. 

L'avenement du natif 

La possibility d'integrer des videos de facon native dans des 
pages web pourrait bien etre l'ajout le plus enivrant depuis 
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l'introduction de l'element img. Les gros pontes comme Google 
n'ont pas manque d'exprimer leur enthousiasme. Vous pouvez 
avoir un apercu de ce qu'ils ont prevu pour YouTube a l'adresse 
http://y0utube.com/HTML5. 

L'un des problemes avec l'utilisation de plug-ins pour les medias 
riches, c'est que le contenu du plug-in est isole du reste du docu- 
ment, alors que des medias riches natifs s'accommodent tres 
bien d'autres technologies, comme JavaScript et CSS. 

L'element video n'est pas seulement scriptable, il est egalement 
« stylable » (fig 3.08). 



FIC 3.08 

video. 



Style applique a un el 




Essayez done de faire ca avec un plug-in... 

L'audio et la video sont les bienvenus dans THTML5, mais le 
Web n'est pas qu'un support de diffusion. Il est interactif. Les 
formulaires sont la facon la plus ancienne, et la plus puissante, 
de permettre cette interaction. Au chapitre 4, nous allons nous 
interesser a la nouvelle mouture des formulaires en HTML5. 
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Quand Javascript fut introduit dans les navigateurs web, il fut 
immediatement utilise pour deux taches : les images reactives 
et les formulaires ameliores. Quand CSS arriva avec sa pseudo- 
classe : hover, les web designers n'eurent plus besoin d'utiliser 
JavaScript pour obtenir un simple effet au survol de l'image. 

C'est une tendance recurrente. Si un modele est suffisam- 
ment populaire, il evoluera presque certainement d'une solu- 
tion scriptee vers quelque chose de plus declaratif. C'est pour 
cette raison que CSS3 comprend encore plus d'animations qui 
requeraient auparavant l'utilisation de JavaScript. 

Pour ce qui est des formulaires ameliores, CSS est limite. C'est 
la que THTML5 entre en jeu. Suivant le meme modele migra- 
toire (solution scriptee vers solution declarative), la specifica- 
tion apporte de nombreuses ameliorations. 
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Ces fonctionnalites faisaient a l'origine partie d'une specifi- 
cation du WHATWG appele Web Forms 2.0, fondee sur les 
travaux existants du W3C. Cette specification fait desormais 
partie de l'HTMLs. 



PLACEHOLDER 

Voici un modele de script DOM repandu, souvent utilise pour 
les formulaires de recherche : 

1. Quand un champ du formulaire est vide, inserer un texte de 
substitution. 

2. Quand l'utilisateur selectionne ce champ, retirer le texte de 
substitution. 

3. Si l'utilisateur quitte le champ en le laissant vide, retablir le texte de 
substitution. 

Le texte de substitution est generalement affiche d'une couleur 
plus claire qu'une veritable valeur, a l'aide de CSS, de JavaScript, 
ou d'une combinaison des deux. 

Dans un document HTML5, vous pouvez simplement utiliser 
1'attribut placeholder (fig 4.01) : 

<label for="hobbies">Vos hobbies</label> 

<input id="hobbies" name="hobbies" type="text" » 

placeholder="Tournage de pouces"> 

L'attribut placeholder fait des merveilles avec les naviga- 
teurs qui le supportent, mais helas, ils sont encore bien peu 
nombreux. C'est a vous de decider de la maniere d'aborder les 
navigateurs incompatibles. 



I 1 fic 4.01 :« Tournage de pouces » est affich 

Vos nobDies Tou '-age de pouces , , , . ,, ., . , ... 

1 * r dans le champ via I attnbut placeholder. 
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Vous pouvez decider de ne rien faire du tout. Apres tout, c'est 
une fonctionnalite bien sympathique, mais pas indispensable. 
Vous pouvez aussi vous rabattre sur une solution en JavaScript. 
Dans ce cas, vous devrez vous assurer que la solution en ques- 
tion ne s'applique qu'aux navigateurs qui ne comprennent pas 
l'attribut placeholder. 

Voici une petite fonction JavaScript generique qui permet de 
verifier si un element supporte un attribut particulier : 

function elementSupporteAttribut(element,attribut) { 
var test = document. createElement(element); 
if (attribut in test) { 

return true; 
} else { 

return false; 

} 

} 

Cette fonction cree un element « fantome » dans la memoire (mais 
pas dans votre document), puis verifie si ce prototype d'element 
comprend une propriete portant le meme nom que l'attribut dont 
vous testez la presence. La fonction renvoie true ou false. 

Avec cette fonction, vous pouvez vous assurer que la solution 
JavaScript ne s'applique qu'aux navigateurs qui ne supportent 
pas l'attribut placeholder : 

if (! elementSupporteAttribut( ' input ' ,' placeholder ') ) { 
// Placez ici la solution de secours en JavaScript. 

} 



AUTOFOCUS 

« Salut ! Je suis le modele autofocus. Vous vous souvenez 
peut-etre de ma prestation dans "Google : J'ai de la chance" et 
"Twitter : Quoi de neuf ?" » 
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II s'agit d'un modele simple comprenant une seule etape, facile 
a programmer en JavaScript : 

i. Quand le document est charge, selectionner automatiquement un 
champ precis d'un formulaire. 

I/HTML5 vous permet de faire cela a l'aide de l'attribut 

autofocus : 

<label for="statut">Quoi de neuf ?</label> 

<input id="statut" name="statut" type="text" autofocus> 

Le seul probleme avec ce modele, c'est qu'il peut etre franchement 
casse-pieds. Quand je surfe sur le Web, ("'utilise souvent la barre espace 
pour faire defiler une page, comme on deroulerait un journal. Au lieu 
de cela, sur les sites comme Twitter qui utilisent le modele autofocus, 
je me retrouve a remplir d'espaces un champ de formulaire. 

Je vois bien pourquoi l'attribut autofocus a ete ajoute a THTML5 
(le sentier des vaches...), mais j'ai peur qu'il ne soit pas vraiment 
pratique, en script comme en natif. C'est une fonctionnalite qui 
peut s'averer tout aussi utile qu'exasperante. Prenez bien le 
temps de reflechir avant de 1'implementer. 

II y a au moins un avantage a ce que ce modele passe du script a 
la balise. En theorie, les utilisateurs pourront desactiver l'option 
dans les preferences de leur navigateur. En pratique, aucun naviga- 
teur ne le permet encore, mais le modele est encore jeune. Pour le 
moment, la seule facon de desactiver l'autofocus consiste a desac- 
tiver entierement JavaScript. C'est un peu comme s'arracher les 
yeux pour se proteger d'une lumiere vive, mais ca marche. 

Comme avec l'attribut placeholder, vous pouvez verifier 
le support de l'attribut autofocus et proposer une solution 
scriptee de secours : 

if ( !elementSupporteAttribut( ' input' , 'autofocus' )){ 
document .get Element By Id ( ' statut ' ) . focus ( ) ; 

} 
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L'attribut autofocus ne marche pas seulement avec l'element 
input. II peut est utilise avec n'importe quel type de champ, comme 
textarea ou select, mais une fois seulement par document. 

REQUIRED 

L'une des utilisations les plus courantes de JavaScript est la 
validation de formulaire cote client. Une fois encore, THTML5 
migre la solution scriptee vers une solution balisee. Ajoutez 
simplement l'attribut booleen required : 

<label for="pass">Votre mot de passe</label> 

<input id="pass" name="pass" type="password" required> 

Theoriquement, cela permet aux navigateurs d'empecher la valida- 
tion du formulaire si les champs requis n'ont pas ete remplis. Bien que 
les navigateurs ne prennent pas encore rattribut required en charge, 
vous pouvez quand meme l'utiliser dans votre validation de formu- 
laire en JavaScript. Au lieu de garder une liste de tous les champs 
requis dans votre script ou d'ajouter class=" required" a vos balises, 
vous pouvez desormais verifier la presence de l'attribut required. 

AUTOCOMPLETE 

Les navigateurs ne se contentent pas d'afficher des pages web. La 
plupart des navigateurs offrent des fonctionnalites supplemen- 
taires concues pour rendre la navigation plus fonctionnelle, plus 
sure ou plus pratique. En general, elles sont tres utiles, mais elles 
peuvent parfois etre desagreables, voire carrement dangereuses. Je 
veux bien que mon navigateur conserve mes coordonnees, mais je 
prefere eviter qu'il conserve mes identifiants bancaires, au cas ou 
quelqu'un deciderait de voler mon ordinateur. 

L'HTML5 vous permet de desactiver l'autocompletion champ 
par champ. L'attribut autocomplete n'est pas booleen, mais il 
ne peut pourtant prendre que deux valeurs, « on » et « off » : 

<form action="/autodestruction" autocomplete="off "> 
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Par defaut, les navigateurs supposeront que la valeur de 
l'attribut autocomplete est « on », leur permettant de prerem- 
plir les formulaires. 

Vous pouvez avoir le beurre et l'argent du beurre. Si vous voulez 
autoriser le preremplissage d'un formulaire, mais le desactiver 
pour un ou plusieurs champs, c'est possible : 

<input type="text" name="usageunique" » 
autocomplete="off "> 

II n'existe pas de solution de secours en JavaScript pour les naviga- 
teurs qui ne supportent pas l'attribut autocomplete. Dans ce cas, 
le nouvel attribut HTML5 complete le comportement existant des 
navigateurs plutot que de remplacer une solution scriptee. 

La possibilite de desactiver l'autocompletion dans les navi- 
gateurs peut sembler etre un drole d'ajout a la specification 
HTML5. L'HTML5 est cense codifier les modeles repandus, et 
ce n'est pas un cas tres coutumier. Mais etant donne les risques 
de securite potentiels induits par l'autocompletion, il parait 
logique de permettre aux proprietaires de sites web de neutra- 
liser cette fonctionnalite particuliere. 

DATALIST 

Le nouvel element datalist vous permet d'hybrider un element 
input classique avec un element select. Grace a l'attribut list, 
vous pouvez combiner une liste d'options et une zone de saisie 
(fig 4.02) : 

<label for="maplanete">votre planete de naissance</label> 
<input type="text" name="maplanete" id="maplanete" » 
list="planetes"> 
<datalist id="planetes"> 

<option value="Mercure"> 

<option value="Venus"> 

<option value="Terre"> 
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<option value="Mars"> 
<option value="3upiter"> 
<option value="Saturne"> 
<option value="Uranus"> 
<option value="Neptune"> 
</datalist> 

Cela permet aux utilisateurs de selectionner une option 
proposee dans la liste ou d'entrer une valeur qui n'est pas la 
liste du tout. Cela s'avere tres pratique dans les situations ou 
Ton ajouterait normalement un champ du genre : « Si autre, 
veuillez preciser... » (fig 4.03). 



Votre plane te PI u ton 
de naissance Mercure 
Venus 
Terre 
Mars 
Jupiter 
Saturne 
Uranus 
Neptune 



fig 4.02 : Le nouvel element datalist. 



Votre planete Pluton 
de naissance Mercure 
Venus 
Terre 
Mars 
Jupiter 
Saturne 
Uranus 
Neptune 



fig 4.03 : L'element datalist, avec la 
possibilite pour I'utilisateur d'entrer une 
valeur absente de la liste. 



L'element datalist est une amelioration appreciable et discrete 
pour les formulaires. Si un navigateur ne supporte pas datalist, 
le champ se comporte alors comme une zone de saisie normale. 



TYPES DE CHAMPS 

L'attribut type de l'element input s'enrichit considerablement 
en HTML5. II y a tellement de sentiers a paver qu'on se croirait 
sur un chantier a Dubai. 
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Recherche 

Un element input avec l'attribut type="search" se comportera 
quasiment de la meme maniere qu'un element input avec un 
attribut type="text" : 

< label f or=" recherche ">Rechercher< /label > 

<input id="recherche" name="recherche" type="search"> 

La seule difference entre « text » et « search », c'est qu'un navi- 
gateur pourra afficher un champ de recherche differemment 
pour refleter le style des champs de recherche du systeme 
d'exploitation. C'est exactement ce que fait Safari (fig 4.04). 



RecheiClier (~ Rechei'Cher je suis une recherche 

fig 4.04 : Safari applique le style de Mac OS aux champs de recherche. 



Coordonnees 

II existe trois nouvelles valeurs pour l'attribut type correspon- 
dant a differents types de coordonnees, adresse mail, sites web 
et numeros de telephone : 

<label f or="adressemail" >Adresse mail</label> 

<input id="adressemail" name="adressemail" type="email"> 

<label for="siteweb">Site web</label> 

<input id="siteweb" name="siteweb" type="url"> 

< label f or= "telephone ">Telephone</ label > 

<input id="telephone" name="telephone" type="tel"> 

Une fois encore, ces champs se comporteront comme des 
zones de saisie, mais les navigateurs disposeront d'un peu plus 
d'informations a propos des donnees attendues dans le champ. 
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Safari pretend supporter ces nouveaux types de champs, 
mais on ne constate a premiere vue aucune difference dans 
le navigateur de bureau par rapport a l'attribut type="text". 
Cependant, si Ton commence a interagir avec le meme formu- 
laire sous Safari Mobile, les differences deviennent evidentes. 
Le navigateur affiche un clavier different sur l'ecran selon la 
valeur de l'attribut type (fig 4.05). 




Bravo WebKit, c'est finement joue. 



Sliders 

De nombreuses librairies JavaScript offrent des widgets preconcus 
a utiliser dans vos applications web. lis marchent bien du moment 
que JavaScript est active. II serait bon que nos utilisateurs n'aient 
pas atelecharger un fichier JavaScript chaque fois que nous souhai- 
tons ajouter un controle interessant sur nos pages. 

Le slider est un exemple classique. Jusqu'a maintenant, il 
nous fallait utiliser JavaScript pour emuler ce type d'element 
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interactif. En HTML5, grace a type="range", les navigateurs 
peuvent maintenant proposer un controle natif : 

<label for="montant">Combien ?</label> 

<input id="montant" name="montant" type="range"> 

Actuellement, Safari et Opera supportent tous deux ce type de 
champ, proposant des controles semblables (fig 4.06). 



Conibien ? FIC ■ ' _e tyP e c ' e cr| amp range sous 

Safari et Opera. 



Par defaut, la valeur saisie acceptera une plage allant de zero 
a cent. Vous pouvez definir vos propres valeurs minimum et 
maximum a l'aide des attributs min et max : 

<label for="note">Votre note</label> 
<input id="note" name="note" type="range" » 
min="l" max="5"> 

C'est bien beau pour les utilisateurs de Safari et d'Opera, mais 
les autres navigateurs afficheront un simple champ de saisie 
textuel. Cela peut suffire, mais vous voudrez peut-etre definir 
un contenu de secours en JavaScript pour les navigateurs qui ne 
supportent pas type=" range". 

Test 

Le test du support natif des types de champs requiert une 
manipulation semblable au test du support des attributs. II vous 
faudra une fois de plus creer un element input « fantome » 
dans la memoire, puis definir l'attribut type que vous souhaitez 
tester. Si vous obtenez la valeur « text » en demandant la valeur 
de la propriete type, vous saurez que le navigateur ne supporte 
pas la valeur entree. 
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Voici un programme d'exemple, meme si vous pouvez sure- 
ment ecrire quelque chose de beaucoup plus elegant : 

function inputSupporteType(test) { 

var input = document . createElement( ' input ') ; 
input . setAttribute( ' type ' , test) ; 
if (input. type == 'text') { 

return false; 
} else { 

return true; 

} 

} 

Vous pouvez ensuite utiliser cette fonction pour vous assurer 
qu'un widget JavaScript est fourni aux navigateurs qui ne 
supportent pas tel ou tel type de champs : 

if (! inputSupporteType( ' range ') ) { 

// Placez ici la solution de secours en JavaScript. 

} 

Un controle natif sera surement charge plus vite qu'une solu- 
tion scriptee, qui devra attendre la fin du chargement du DOM. 
De meme, un controle natif sera generalement plus accessible 
qu'un controle scripte, meme si, curieusement, le controle 
range de Safari n'est pour l'instant pas accessible au clavier ! 

Boutons fleches 

Le controle natif range n'expose pas la valeur sous-jacente a 
l'utilisateur. Au lieu de cela, le nombre est affiche sur la forme 
d'un slider. Cela convient pour certains types de donnees, 
mais il peut parfois etre preferable de permettre a l'utilisateur 
de voir et de choisir la valeur numerique. C'est a cela que sert 
type="number" : 

<label for="montant">Combien ?</label> 

■cinput id="montant" name="montant" type="number" » 

min="5" max="20"> 
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L'utilisateur peut non seulement entrer directement une valeur 
dans le champ de saisie, mais egalement se servir des fleches 
pour modifier celle-ci (fig 4.07). 



I ir^i fig 4.07 : Boutons fleches utilisant I 

Combien ? type number . 



Le type de champ number est un hybride de text et de range. 
II permet aux utilisateurs d'entrer directement des valeurs, 
comme dans un champ text, mais il permet egalement aux 
navigateurs de s'assurer que seules des valeurs numeriques sont 
entrees, comme avec le controle range. 

Date et heure 

L'un des widgets JavaScript les plus prises est le calendrier. 
Vous connaissez la chanson : vous reservez un avion ou vous 
creez un evenement et vous devez choisir une date. Un petit 
calendrier s'affiche a cet effet. 

Ces calendriers font tous la meme chose, mais vous remarquerez 
que leur implementation est legerement differente d'un site a l'autre. 
Un widget calendrier natif permettrait de lisser ces divergences et 
de reduire la charge cognitive pendant le choix de la date. 

UHTML5 introduit un tas de nouveaux types de champs speci- 
fiquement concus pour la date et l'heure : 

• date renvoie l'annee, le mois et le jour. 

• datetime renvoie l'annee, le mois et le jour en combinaison avec les 
heures, les minutes, les secondes et le fuseau horaire. 

• datetime -local est identique mais sans le fuseau horaire. 

• time renvoie les heures, les minutes et les secondes. 

• month renvoie l'annee et le mois sans le jour. 

Tous ces types de champs utilisent le format standardise AAAA- 
MM-JJThh:mm:ss.Z (oil A est l'annee, M le mois, J le jour, h les 
heures, m les minutes, s les secondes et Z le fuseau horaire). 
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Prenons par exemple la date et l'heure de la fin de la premiere 
guerre mondiale, 11 h 11 le 11 novembre 1918 : 

• date : 1918-11-11 

• datetime : 1918-11-11X11:11:00+01 

• datetime-local : 1918-11-11X11:11:00 

• time : 11:11:00 

• month : 1918-11 

II n'existe pas de type de champ year, bien qu'il y ait un type 
de champ week qui renvoie un nombre entre 1 et 53 en combi- 
naison avec l'annee. 

II est tres simple d'utiliser ces types de champs : 

<label for="dtstart">Date de depart</label> 
■cinput id="dtstart" name="dtstart" type="date"> 

Opera implemente ces types de champs avec son incontourn- 
able touche disgracieuse (fig 4.08). 



fic 4.08 : L'affichage du Date de d6 t ~T? 



« Decembre 




►J 2009 £g 


Semain9 Lun Mar Mer 


Jeu 


Ven Sam Dim 


49 30 1 2 


3 


4 5 6 


50 7 8 9 


10 


11 12 13 


51 14 15 16 


17 


18 19 20 


52 21 22 23 


24 


25 26 27 


53 28 29 30 


31 


1 2 3 


1 4 5 6 




8 9 10 


Aujourd'hui 




Aucun 



Comme toujours, les navigateurs qui ne supportent pas ces 
types de champs se rabattront sur un champ de saisie normal. 
Dans cette situation, vous pouvez demander aux utilisateurs 
d'entrer la date et l'heure au format ISO, ou utiliser la librairie 
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JavaScript de votre choix afin de generer un widget. Assurez- 
vous de commencer par verifier le support natif : 

if ( ! inputSupporteType( ' date ' ) ) { 
// Placez ici un widget calendrier. 

} 

En JavaScript, meme le calendrier le plus elegamment ecrit 
necessitera un code complexe pour generer le tableau des jours 
et gerer les evenements lors du choix de la date. Un calendrier 
natif sera considerablement plus simple et rapide, en plus d'etre 
identique d'un site a l'autre. 

Choix des couleurs 

En HTML5, le plus ambitieux des remplacements de widgets est 
peut-etre le type de champ color. Celui-ci utilise le fameux format 
hexadecimal : #000000 pour le noir, #FFFFFF pour le blanc. 

<label for="bgcolor">Couleur d' arriere-plan</label> 
<input id="bgcolor" name="bgcolor" type="color"> 

L'idee etant d'amener les navigateurs a implementer un widget 
natif pour le choix des couleurs, comme il en existe deja dans 
toutes les autres applications de votre ordinateur. Jusqu'a 
present, aucun navigateur ne l'a implemented mais ca promet ! 

En attendant, vous pouvez opter pour une solution en JavaScript, 
mais assurez-vous de tester le support natif, afin que votre code 
soit a l'epreuve du temps. 

Libre- service 

Tous ces nouveaux types de champs ont deux utilites : ils 
permettent aux navigateurs d'afficher des controles natifs 
adaptes au type de donnees attendu et de valider la valeur 
entree. Ces ajouts a FHTML5 couvrent la majorite des scenarios, 
mais vous devrez parfois valider une valeur qui ne rentre dans 
aucune des nouvelles categories. 
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La bonne nouvelle, c'est que vous pouvez utiliser l'attribut 
pattern pour specifier precisement le type de valeur attendu. 
La mauvaise nouvelle, c'est qu'il vous faudra utiliser une expres- 
sion rationnelle : 

<label for="cp">Code postal</label> 

<input id="cp" name="cp" pattern="[\d]{5}"> 

En general, vous n'aurez jamais besoin d'utiliser l'attribut 
pattern. Si cela devait toutefois vous arriver, vous auriez, 
croyez-moi, tout mon soutien. 

TOURNES VERS LE FUTUR 

Les formulaires ont pris un coup de jeune en HTML5. Le fardeau 
traditionnellement porte par JavaScript passe progressivement 
sur les epaules des balises. Nous sommes en pleine phase de 
transition, et seuls quelques navigateurs supportent quelques 
nouvelles fonctionnalites. Nous ne pouvons pas encore mettre 
JavaScript au placard, mais nous ne sommes pas si loin d'un 
avenir meilleur. 

La validation cote client va devenir beaucoup plus simple, 
meme si vous ne devez jamais vous en contenter et valider 
egalement les valeurs sur le serveur. Vos utilisateurs n'auront 
plus a telecharger de librairies JavaScript pour generer des 
controles de formulaire ; tout sera gere par le navigateur de 
facon native. 

Vous voyez surement les avantages a avoir des controles natifs 
pour les calendriers et les sliders, mais je parie que vous vous 
demandez : « Est-ce que je peux les styler ? » 

C'est une bonne question. A l'heure actuelle, la reponse est 
« non ». Adressez-vous au groupe de travail CSS pour toute 
reclamation. 
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Cela pourrait vous rebuter. Si vous trouvez que l'implementation 
standard d'un element de formulaire est un peu sommaire, vous 
prefererez peut-etre utiliser un widget JavaScript vous offrant 
un plus grand controle. 

J'aimerais alors que vous vous posiez une autre question : 
« Est-ce que je dois les styler ? » 

Rappelez-vous, le Web, ce n'est pas que le controle. Si un visi- 
teur de votre site est habitue a tel bidule de formulaire natif, 
vous ne lui rendrez pas service en remplacant celui-ci par votre 
propre widget, fut-il plus joli. 

Personnellement, j'aimerais bien voir les createurs de naviga- 
teurs se battre pour offrir les controles de formulaire HTML5 
les plus beaux et les plus simples d'utilisation. C'est une guerre 
des navigateurs qui me sierait. 

Mettons maintenant les formulaires de cote, et interessons- 
nous a la nouvelle semantique croustillante de THTML5. 
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L'HTML ne nous procure pas beaucoup d'elements avec lesquels 
travailler. Le choix est digne d'une epicerie de quartier, plus que 
d'une grande surface. 

Nous avons des paragraphes, des listes et des titres, mais pas 
d'evenements, d'informations ou de recettes. L'HTML nous 
donne bien un element pour baliser les abreviations, mais rien 
pour les prix. 

Manifestement, cette restriction n'est pas redhibitoire. Voyez 
plutot la diversite incroyable des sites web. Meme si l'HTML 
ne prevoit pas d'element specifique pour baliser chaque type de 
contenu, il est « suffisamment » flexible. 

Pour paraphraser Winston Churchill, l'HTML est le pire langage 
de balisage, a l'exception de tous les autres. 
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EXTENSIBILITY 



D'autres langages de balisage vous permettent d'inventer l'element que 
vous voulez. En XML, si vous voulez un element event ou price, il 
vous suffit de prendre votre petit clavier et de le creer. L'inconvenient de 
cette liberte, c'est qu'il vous faut ensuite apprendre a un parseur ce que 
event et price veulent dire. L'avantage d'avoir un nombre d'elements 
limite, c'est que chaque user agent connait chaque element. Les navi- 
gateurs ont une connaissance integree de l'HTML. Cela ne serait pas 
possible si nous pouvions creer des noms d'elements a volonte. 

L'HTML offre un joker aux web designers pour ajouter une 
valeur semantique aux elements : l'attribut class. Cet attribut 
nous permet de classer des instances specifiques d'un element 
comme classe ou type special de cet element. Le fait que les 
navigateurs ne comprennent pas le vocabulaire utilise dans nos 
attributs class n'affecte pas le rendu de nos documents. 

Si, a ce stade, vous vous dites « attends une seconde, les classes, c'est 
pas pour CSS ? », eh bien vous n'avez pas tout a fait tort. Le selec- 
teur de classe CSS est un exemple de technologie qui utilise l'attribut 
class, mais ce n'est pas la seule raison d'utiliser les classes. Les classes 
peuvent egalement etre utilisees dans un script DOM. Elles peuvent 
meme etre utilisees par les navigateurs si le nom des classes suit une 
convention entendue, comme c'est le cas avec les microformats. 

Microformats 

Les microformats sont un ensemble de conventions fixees par une 
communaute. Ces formats utilisent l'attribut class pour combler 
les lacunes les plus flagrantes de l'HTML : hCard pour les coor- 
donnees, hCalendar pour les evenements, hAtom pour les infor- 
mations. Puisqu'il y a un consensus de la communaute concernant 
le nom des classes a utiliser, des parseurs et des extensions de navi- 
gateurs acceptent maintenant ces modeles specifiques. 

Les microformats sont limites par essence. lis ne pretendent pas 
resoudre chaque cas d'utilisation potentiel, mais se concentrent 
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plutot sur les « fruits a portee de main ». lis traitent 80 % des cas 
d'utilisation en produisant 20 % de l'effort. II est relativement 
facile de determiner quels sont ces fruits : il suffit de regarder le 
contenu deja en place, ou en d'autres termes familiers, de paver 
le sentier des vaches. 

(Ja vous rappelle quelque chose ? Les microformats etl'HTML5 
sont construits sur des philosophies tres similaires. En fait, ma 
description des microformats (des conventions fixees par une 
communaute) pourrait tout aussi bien s'appliquer a FHTML5. 

Vider l'ocean a la petite cuillere 

Le fait d'avoir utilise les microformats comme modeles pour le 
developpement de THTML5 n'est pas au gout de tout le monde. 
La loi des 80/20 est assez bonne pour le monde rudimentaire 
des noms de classes, mais l'est-elle pour le langage de balisage le 
plus important du monde ? 

Certaines personnes pensent que l'HTML doit etre extensible a 
l'infini. Il ne serait done pas suffisant de fournir des solutions 
pour la majorite des cas d'utilisation ; le langage devrait fournir 
des solutions pour tous les cas d'utilisation potentiels. 

L'argument le plus eloquent en faveur d'une telle extensibility 
fut peut-etre celui de John Allsopp dans son brillant article 
sur A List Apart, « Semantics in HTML5 » (http://bkaprt.com/ 
htmls/6 1 ) : 

Nous n'avons pas besoin d'ajouter des termes specifiques au vocabulaire 
de l'HTML, nous devons a/outer un mecanisme qui permet d'ajuster la 
richesse semantique d'un document selon les besoins. 

Il existe deja des technologies a cet effet. RDFa permet aux 
auteurs d'ajouter du vocabulaire personnalise a des documents 
HTML. Mais a la difference des microformats, qui utilisent 

1. Adresse complete : http://www.alistapart.com/articles/semanticsinHTML5 
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simplement un ensemble determine de noms de classes, RDFa 
utilise des espaces de nommage pour permettre la creation 
d'une variete infinie de formats. Ainsi, la oil un microformat 
utiliserait une balise du type <hl class="sommaire" >, RDFa 
utilisera <hl property="monformat : sommaire">. 

II est evident que RDFa est potentiellement tres puissant, mais 
son expressivite a un prix. Les espaces de nommage introduisent 
une couche de complexite supplementaire qui s'accommode 
mal de la nature relativement simple de l'HTML. 

Le debat sur les espaces de nommage n'est pas nouveau. II y a 
quelques annees, dans un article de son blog, Mark Nottingham 
songeait a leurs effets secondaires potentiellement destructeurs 
(http://bkaprt.eom/html5/7 1 ) : 

Ce qui m'a paru interessant avec I'extensibilite de l'HTML, e'est que 
les espaces de nommage n'etaient pas necessaires. Netscape a ajoute 
blink, Microsoft a ajoute marquee, et ainsi de suite, je soulignerai le fait 
que si /'on avait eu des espaces de nommage en HTML des le depart, on 
aurait legitime et institutionnalise les differences entre navigateurs au 
lieu de converger vers la meme solution. 

Contre I'extensibilite infinie, voila une argumentation percu- 
tante en faveur d'un vocabulaire limite, fonde sur le consensus 
de la communaute. 

L'HTML5 sera probablement accompagne d'une methode 
permettant d'accroitre sa semantique native. Bien sur, l'attribut 
class est toujours valable, et les microformats continueront 
done a fonctionner comme auparavant. I/HTML5 sera peut-etre 
altere pour devenir compatible avec RDFa, ou utilisera peut- 
etre son propre vocabulaire pour les « microdonnees ». Dans 
tous les cas, cette extensibility aura vraisemblablement tres peu 
d'interet pour la plupart des web designers. Ce qui compte vrai- 
ment, e'est la semantique native, determined par une commu- 
naute et implementee par les createurs de navigateurs. 

1. Adresse complete : http://www.mnot.net/blog/2006/0V07/extensibility 
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NOUVEAUX ELEMENTS 



L'HTML5 implemente une poignee de nouveaux elements de type 
en-ligne (inline) venant rejoindre span, strong, em, abbr et quelques 
autres dans l'arsenal existant. Oh, et on ne dit plus « en-ligne ». On 
preferera dire qu'ils decrivent la « semantique de niveau texte ». 

mark 

En parcourant une liste de resultats de recherche, vous verrez souvent 
le terme recherche mis en surbrillance dans chaque resultat. Vous 
pourriez marquer chaque occurrence du terme recherche a l'aide d'un 
element span, mais span n'est qu'une bequille depourvue de sens, tout 
juste bonne a servir de support a une classe a des fins de style. 

Vous pourriez utiliser em ou strong, mais ce serait semantique- 
ment incorrect ; on ne veut pas donner une quelconque impor- 
tance sur le terme recherche mais simplement trouver une 
facon de le mettre en surbrillance. 

Utilisez l'element mark : 

<hl>Resultats de recherche pour ' licorne ' </hl> 
<ol> 

<lixa href=" http://clearleft.com/"> 
Chevauche la <mark>licorne</mark> UX sur » 
1 J arc-en-ciel du Web. 
</ax/li> 
</ol> 

L'element mark n'accorde aucune importance a son contenu, sauf 
pour montrer que celui-ci presente temporairement un interet. 
La specification nous dit que mark indique « un morceau de texte 
marque ou mis en surbrillance dans un document a des fins de 
reference, du fait de sa pertinence dans un autre contexte ». 

L'element mark est utilisable dans d'autres contextes que les 
resultats de recherche, mais je suis bien infichu de trouver un 
seul exemple du genre. 
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time 



hCalendar est Tun des microformats les plus populaires car il repond 
a un besoin tres courant : marquer des evenements pour que les 
utilisateurs puissent les ajouter directement a leur calendrier. 

Avec hCalendar, la seule etape delicate consiste a decrire les 
dates et les heures de maniere lisible pour une machine. Les 
humains aiment donner des dates sous la forme « 25 mai » ou 
« mercredi prochain », mais les parseurs veulent une jolie date 
au format ISO : AAAA-MM-JJThh:mm:ss. 

La communaute des microformats atrouve quelques solutions intel- 
ligentes a ce probleme, en utilisant par exemple l'element abbr : 

<abbr class="dtstart" title="1992-01-12"> 

12 janvier 1992 
</abbr> 

Si le fait d'utiliser l'element abbr de cette maniere vous incom- 
mode, il existe de nombreuses autres facons de marquer des 
dates et des heures lisibles par une machine dans des micro- 
formats a l'aide du modele de classe value. En HTML5, ce 
probleme est regie par le nouvel element time : 

<time class="dtstart" datetime="1992-01-12"> 

12 janvier 1992 
</time> 

L'element time peut etre utilise pour les dates, les heures, ou 
une combinaison des deux : 

<time datetime="17:00">17 h</time> 

<time datetime="2010-04-07">7 avril</time> 

<time datetime="2010-04-07T17:00">17 h le 7 avril</time> 

Vous n'etes pas oblige de definir l'attribut datetime, mais 
si vous ne le faites pas, vous devrez alors exposer la valeur a 
l'utilisateur final : 
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<time>20ie-04-07</time> 
meter 

L'element meter peut etre utilise pour baliser des mesures, du 
moment que ces mesures font partie d'une echelle avec une 
valeur minimum et une valeur maximum. 

<meter>9 chats sur 10</meter> 

Vous n'avez pas a exposer la valeur maximum si vous ne le 
souhaitez pas. Vous pouvez utiliser l'attribut max a la place : 

<meter max="10">9 chats</meter> 

II existe un attribut min correspondant. Vous pouvez egale- 
ment jouer avec les attributs high, low et optimum. Si vous le 
souhaitez, vous pouvez meme cacher la mesure elle-meme 
dans un attribut value. 

<meter low="-273" high="100" min="12" max="30" » 
optimum="21" value="25"> 

II fait plutot chaud pour cette periode de l J annee. 
</meter> 

progress 

Alors que meter est utile pour decrire quelque chose qui a deja 
ete mesure, l'element progress vous permet de baliser une 
valeur qui est en plein changement : 

Votre profil est complet a <progress>60 %</progress> . 

Une fois encore, vous pouvez utiliser les attributs min, max et 
value : 

<progress min="0" max="100" value="60"x/progress> 
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L'element progress est particulierement utile en combinaison 
avec un script DOM. Vous pouvez utiliser JavaScript pour 
mettre a jour la valeur en temps reel, permettant ainsi au navi- 
gateur de communiquer ce changement a l'utilisateur. Pratique 
pour les envois de fichiers avec Ajax. 

STRUCTURE 

En 2005, Google diligenta une etude pour voir quels fruits 
etaient a portee de main sur les sentiers battus du Web 
(http://code.google.com/webstats/). 

Un parseur s'occupa de parcourir plus d'un milliard de pages 
web et repertoria les noms de classes les plus courants. Les 
resultats furent sans surprise. Les classes comme header, 
footer et nav tenaient le haut du pave. Cette semantique emer- 
gente correspond bien a certains des nouveaux elements struc- 
tured de THTML5. 

section 

L'element section est utilise pour regrouper du contenu de 
maniere thematique. Cela rappelle l'element div, souvent utilise 
comme un conteneur de contenu generique. La difference, c'est 
que div n'a aucune signification semantique ; il ne nous dit rien 
de son contenu. L'element section, en revanche, est utilise 
explicitement pour regrouper du contenu apparente. 

Vous pourrez peut-etre remplacer quelques uns de vos elements 
div par des elements section, mais demandez-vous toujours si 
tout le contenu est apparente. 

<section> 

<hl>DOM Scripting</hl> 
<p>Ce livre est destine aux designers » 
plutot qu'aux programmeurs . </p> 
<p>Par Deremy Keith</p> 
</section> 
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header 



La specification HTML5 decrit l'element header comme un 
conteneur pour « un groupe d'outils d'introduction ou de naviga- 
tion ». Cela semble raisonnable. C'est le genre de contenu que je 
m'attendrais a trouver dans une manchette, et le mot « header », 
ou en-tete, est souvent utilise comme synonyme de manchette. 

II y a une difference cruciale entre l'element header de THTML5 
et l'usage repandu du mot « en-tete » ou « manchette ». II n'y a 
generalement qu'une seule manchette sur une page, mais un docu- 
ment peut comporter plusieurs elements header. Vous pouvez 
par exemple utiliser un element header dans un element section. 
En fait, c'est sans doute ce que vous devriez faire. La specification 
decrit l'element section comme « un regroupement de contenu 
thematique, comprenant generalement un en-tete ». 

<section> 
<header> 

<hl>DOM Scripting</hl> 
</header> 

<p>Ce livre est destine aux designers » 
plutot qu'aux programmeurs.</p> 
<p>Par Deremy Keith</p> 
</section> 

Un header apparaitra normalement en haut d'un document ou 
d'une section, mais ce n'est pas obligatoire. II est defini par son 
contenu (presentation ou aide a la navigation) plutot que par sa 
position. 

footer 

Comme l'element header, footer semble decrire une posi- 
tion, mais comme pour header, ce n'est pas le cas. L'element 
footer contient plutot des informations au sujet de l'element 
qui le contient : auteur, informations de copyright, liens vers 
des contenus apparentes, etc. 
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Cela correspond assez bien a l'idee que les web designers se 
font du mot « footer ». La difference, c'est qu'on a l'habitude 
d'avoir un seul pied de page pour tout un document. I/HTML5 
nous permet egalement d'en placer a l'interieur des sections. 

<section> 
<header> 

<hl>DOM Scripting</hl> 
</header> 

<p>Ce livre est destine aux designers » 
plutot qu'aux programmeurs . </p> 
<footer> 

<p>Par Deremy Keith</p> 
</footer> 
</section> 

aside 

Si [element header correspond au concept de la manchette, 
l'element aside est une sorte d'encadre. Quand je dis 
« encadre », ce n'est pas une question de position. II ne suffit 
pas que le contenu apparaisse a gauche ou a droite du contenu 
principal pour utiliser l'element aside. Une fois de plus, c'est le 
contenu, et non la position, qui est important. 

L'element aside doit etre utilise pour du contenu indirecte- 
ment apparente. Si vous avez un morceau de contenu que vous 
considerez comme different du contenu principal, l'element 
aside est probablement le bon conteneur. Demandez-vous si le 
contenu de l'element aside peut etre retire sans affecter le sens 
du contenu principal du document ou de la section. 

Un bon exemple de contenu indirectement apparente serait une 
citation extraite du document. Elle rend la lecture plus agre- 
able, mais on peut la supprimer sans affecter la comprehension 
du contenu principal. 

Gardez a l'esprit que si votre concept visuel prevoit de placer 
une partie du contenu dans un encadre, aside n'est pas 
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necessairement le conteneur adequat. II est courant, par 
exemple, de placer la biographie de l'auteur dans un encadre. 
L'element footer se prete mieux a ce genre de donnees, comme 
l'indique explicitement la specification (fig 5.01). 
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Given its relatively limited scape, HTML can be remarkabiy expressive. With a pit of 
ateral thinking, we can mark up content such as tag clouds and progress meters. 
even when we don't have explicit HTML elements for those patterns. 

suppose we want to mark up a short conversation: 

El Mce: "I think Eve is watching. 

Bob: This isn't a cryptography tutorial ...we're in the wrong example!" 

A note in the rrre HTML 4.01 spec says it's okay to use a definition list: 

Another application of dl , for example, is for marking up dialogues, with each 
I dt naming a speaker, and each dd containing his or her words. 



fig 5.01 : Le texte « About the author » de cette capture d'ecran doit etre balise avec 
footer et non aside. 



Dans 90 % des cas, un header sera place en haut de votre 
contenu, un footer a la fin, et un aside sur le cote. Mais mefiez- 
vous de cette apparente simplicite. Marchez sur des ceufs et 
prenez garde aux 10 % qui restent. 



nav 

L'element nav fait exactement ce qu'on attend de lui. II contient 
des informations de navigation, generalement une liste de 
liens. 
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En fait, je ferais mieux de clarifier tout cela. L'element nav est 
concu pour les informations de navigation principales. Une 
simple liste de liens ne justifie pas l'utilisation de l'element 
nav. En revanche, les liens permettant de naviguer sur un site 
doivent presque obligatoirement utiliser l'element nav. 

Bien souvent, un element nav apparaitra dans un element 
header. Cela parait logique si Ton considere que l'element 
header peut etre utilise pour les « aides a la navigation ». 

article 

II peut etre utile de considerer header, footer, nav et aside 
comme des formes specialisees de l'element section. Une 
section est un morceau generique de contenu apparente, 
tandis que les elements header, footer, nav et aside sont des 
morceaux specifiques de contenu apparente. 

L'element article est un autre type de section specialise. On 
l'utilise pour le contenu apparente autonome. Le probleme etant 
de determiner ce qui constitue un contenu « autonome ». 

Demandez-vous si vous publieriez le contenu dans un flux RSS 
ou Atom. Si le contenu a toujours un sens dans ce contexte, 
article est probablement l'element a utiliser. En fait, l'element 
article est concu specifiquement pour la syndication. 

Si vous utilisez un element time dans un article, vous pouvez 
ajouter l'attribut booleen optionnel pubdate pour indiquer qu'il 
s'agit de la date de publication. 

<article> 

<header> 

<hl>Critique de DOM Scripting</hl> 
</header> 

<p>Un vraie lueur d'espoir pour JavaScript au terme » 
d'une longue et parfois sombre traversee. </p> 
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<footer> 
<p>Publie a 

<time datetime="2005-10-08T15:13" pubdate> 
15 h 13 le 8 octobre 2005 
</time> 
par Glenn Dones</p> 
</footer> 
</article> 

S'il y a plus d'un element time dans un article, un seul peut 
comporter l'attribut pubdate. 

L'element a rt i c 1 e est utile pour les billets de blog, les informations, 
les commentaires, les critiques et les fils de discussion. II couvre 
exactement les memes cas d'utilisation que le microformat hAtom. 

La specification HTML5 va encore plus loin. Elle declare egale- 
ment que l'element article doit etre utilise pour les widgets 
autonomes : cours de la bourse, calculatrice, horloge, meteo 
et autres. L'element article tache maintenant de couvrir 
les memes cas d'utilisation que les web slices de Microsoft 
(http://bkaprt.eom/html5/8 1 ). 

II me parait tres contre-intuitif d'appliquer un element appele 
« article » au concept des widgets. Mais apres tout, les articles 
et les widgets sont tous deux des types de contenu publiables 
et autonomes. 

Ce qui est plus problematique, e'est que les elements article et 
section sont tres similaires. Tout ce qui les separe, e'est le mot 
« autonome ». II serait facile de decider quel element utiliser 
s'il existait des regies strictes. Au lieu de cela, tout est une ques- 
tion d'interpretation. II peut y avoir plusieurs articles dans une 
section, il peut y avoir plusieurs sections dans un article, il peut 
meme y avoir des sections dans les sections et des articles dans 
les articles. C'est a vous de decider quel est l'element le plus 
approprie semantiquement pour une situation donnee. 

1. Adresse complete : http://www.ieaddons.com/en/webslices/ 
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Un remede contre la div-ite ? 

I/HTML5 apporte les quelques nouveaux elements structurels 
decrits ci-dessus. Ceux-ci sont particulierement utiles si vous 
construisez un site conventionnel, comme un blog. La plupart 
des blogs comprennent un en-tete suivi d'une serie d'articles, 
avec du contenu parallele dans un encadre et un pied de page 
(fig 5.02). 
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fig 5.02 : Le blog de votre serviteur. 



Vous pouvez maintenant remplacer certains de vos elements 
div par des elements structurels semantiquement plus precis. 
Attention, n'en faites pas trop. Il y a fort a parier que si vous 
utilisez div aujourd'hui, vous utiliserez encore div demain. Ne 
changez pas vos elements div pour des elements HTML5 tout 
neufs, simplement parce que vous en avez la possibility. Pensez 
au contenu. 
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Ces nouveaux elements n'ont pas ete crees dans le seul but de 
remplacer les elements div. lis offrent aux navigateurs web une 
toute nouvelle facon d'apprehender votre contenu. 

MODELES DE CONTENU 

Les versions precedentes des langages de balisage divisaient les 
elements en deux categories : les elements de type en-ligne et les 
elements de type blocs. I/HTML5 utilise une approche plus fine, 
repartissant les elements dans un plus grand nombre de categories. 

Les elements en-ligne ont maintenant un modele de contenu de 
« semantique de niveau texte ». De nombreux elements de niveau 
bloc sont maintenant rassembles sous la banniere des « contenus 
de regroupement » : paragraphes, elements de liste, sections et 
ainsi de suite. Les formulaires ont leur propre modele de contenu. 
Les images, l'audio, la video et les canvas sont des « contenus 
integres ». Les nouveaux elements structured introduisent un 
modele de contenu completement nouveau appele « contenu de 
segmentation » (sectioning content). 

Contenu de segmentation 

II est possible de creer le plan d'un document HTML avec les 
elements de titre hi a h6. Voyez plutot cet exemple : 

<hl>An Event Apart</hl> 
<h2>Villes</h2> 

<p>Rejoignez-nous en 2010 dans les villes suivantes . </p> 
<h3>Seattle</h3> 

<p>Suivez la route de brique jaune jusqu'a la ville 

emeraude.</p> 

<h3>Boston</h3> 

<p>Beantown pour les intimes . </p> 

<h3>Minneapolis</h3> 

<p>La plus <em>belle</em>.</p> 

<small>Logement non fourni. </small> 
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Ce qui nous donne le plan suivant : 

• An Event Apart 
• Villes 
■ Seattle 

• Boston 

• Minneapolis 

Cela marche plutot bien. Tout contenu place a la suite d'un 
element de titre est associe a ce titre. 

Regardez maintenant le dernier element small. Celui-ci devrait 
etre associe au document dans son integralite, mais un naviga- 
teur n'a aucun moyen de savoir que l'element small ne doit pas 
dependre de l'en-tete « Minneapolis ». 

Le nouveau contenu de segmentation de THTML5 vous 
permet de delimiter explicitement le debut et la fin du contenu 
apparente : 

<hl>An Event Apart</hl> 
<section> 

<header> 

<h2>Villes</h2> 
</header> 

<p>Rejoignez-nous en 2010 dans les villes suivantes.</p> 
<h3>Seattle</h3> 

<p>Suivez la route de brique jaune.</p> 
<h3>Boston</h3> 

<p>Beantown pour les intimes . </p> 
<h3>Minneapolis</h3> 
<p>La plus <em>belle</em> . </p> 
</section> 

<small>Logement non fourni . </small> 

II est maintenant clair que l'element small depend de l'en-tete 
« An Event Apart » et non de l'en-tete « Minneapolis ». 
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II est possible de subdiviser encore plus ce contenu, en placant 
chaque ville dans sa propre section : 

<hl>An Event Apart</hl> 
<section> 

<header> 

<h2>Villes</h2> 

</header> 

<p>Rejoignez-nous en 2010 dans les villes suivantes . </p> 
<section> 

<header> 

<h3>Seattle</h3> 

</header> 

<p>Suivez la route de brique jaune.</p> 
</section> 
<section> 

<header> 

<h3>Boston</h3> 
</header> 

<p>Beantown pour les intimes . </p> 
</section> 
<section> 

<header> 

<h3>Minneapolis</h3> 
</header> 

<p>La plus <em>belle</em> . </p> 
</section> 

</section> 

<small>Logement non fourni. </small> 

Ce qui nous donne le meme plan : 

• An Event Apart 
■ Villes 

• Seattle 

• Boston 

• Minneapolis 
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L'algorithme de calcul du plan 

Jusqu'ici, le nouveau contenu de segmentation ne nous aide 
pas beaucoup plus que les versions precedentes de l'HTML. 
La nouveaute de THTML5, c'est que chaque section possede 
son propre plan autonome. Cela veut dire que vous n'avez plus 
besoin de garder le fil du niveau de titre a utiliser. Vous pouvez 
partir de hi a chaque fois : 

<hl>An Event Apart</hl> 
<section> 
<header> 

<hl>Villes</hl> 

</header> 

<p>Rejoignez-nous en 2010 dans les villes suivantes . </p> 
<section> 

<header> 

<hl>Seattle</hl> 

</header> 

<p>Suivez la route de brique jaune.</p> 
</section> 
<section> 

<header> 

<hl>Boston</hl> 

</header> 

<p>Beantown pour les intimes.</p> 
</section> 
<section> 

<header> 

<hl>Minneapolis</hl> 

</header> 

<p>La plus <em>belle</em> . </p> 
</section> 
</section> 

<small>Logement non fourni.</small> 

Les versions precedentes de l'HTML auraient produit un plan 
errone : 
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• An Event Apart 

• Villcs 

• Seattle 

• Boston 

• Minneapolis 

En HTML5, le plan est correct : 

• An Event Apart 

■ Villes 

• Seattle 

• Boston 

• Minneapolis 

hgroup 

Parfois, on voudra utiliser un element de titre sans voir son 
contenu apparaitre dans le plan du document. C'est ce que vous 
permet de faire l'element hgroup : 

<hgroup> 

<hl>An Event Apart</hl> 

<h2>Pour ceux qui font le web</h2> 
</hgroup> 

Dans ce cas, le titre de niveau deux (« Pour ceux qui font le 
web ») n'est en fait qu'un slogan. Dans un element hgroup, seul 
le premier en-tete fera partie du plan. Celui-ci n'est pas neces- 
sairement un hi : 

<hgroup> 

<h3>D0M Scripting</h3> 

<h4>Web design avec JavaScript » 

et le Document Object Model</h4> 
</hgroup> 
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Racines de segmentation 

Certains elements sont invisibles sur le plan genere. En d'autres 
termes, quel que soit le nombre de titres que contiennent ces 
elements, ceux-ci n'apparaitront pas dans le plan du document 

Les elements blockquote, f ieldset et td ne sont pas pris en 
compte par Talgorithme de calcul du plan. Ces elements sont 
appeles « racines de segmentation » (sectioning roots), a ne pas 
confondre avec le contenu de segmentation. 

Portability 

Puisque chaque contenu de segmentation genere son propre 
plan, vous n'avez plus a vous contenter des elements hi a h6. II 
n'y a pas de limite au nombre de niveaux de titres, mais surtout, 
vous pouvez commencer a penser votre contenu de maniere 
vraiment modulaire. 

Supposons que je veuille publier un billet sur mon blog appele 
« Sandwich au fromage ». Avant THTML5, il m'aurait fallu 
connaitre le contexte du billet afin de decider du niveau d'en-tete 
a utiliser pour le titre. Si le billet est sur le page d'accueil, il appa- 
rait alors apres un element hi contenant le titre de mon blog : 

<hl>Mon blog genial</hl> 

<h2xa href ="fromage. html" >Sandwich au f romage</ax/h2> 
<p>Mon chat a mange un sandwich au fromage. </p> 

Mais si je publie le billet sur sa propre page, je veux que le titre 
soit un titre de niveau un : 

<hl>Sandwich au fromage</hl> 

<p>Mon chat a mange un sandwich au fromage. </p> 

En HTML5, je n'ai pas a me soucier du niveau de titre a utiliser. 
Il me faut simplement utiliser un contenu de segmentation, 
dans ce cas, un element article : 
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<article> 

<hl>Sandwich au f romage</hl> 

<p>Mon chat a mange un sandwich au fromage.</p> 
</article> 

Maintenant, le contenu est vraiment portable. Le fait qu'il appa- 
raisse sur la page d'accueil ou sur sa propre page n'a aucune 
importance : 

<hl>Mon blog genial</hl> 
<article> 

<hl>Sandwich au fromage</hl> 

<p>Mon chat a mange un sandwich au fromage.</p> 
</article> 

Le nouvel algorithme de calcul du plan de FHTML5 produit le 
bon resultat : 

• Mon blog genial 

• Sandwich au fromage 

Scoped 

Le fait que chaque contenu de segmentation dispose de son 
propre plan est ideal pour Ajax. Une fois de plus, THTML5 
affiche l'ambition d'une specification concue pour les applica- 
tions web. 

II peut etre problematique de transferer un bout de contenu 
d'un document a un autre. Les regies CSS s'appliquant au docu- 
ment parent s'appliqueront egalement au contenu insere. On 
touche la a Tun des defis majeurs de la distribution des widgets 
sur le Web. 

L'HTML5 offre une solution a ce probleme sous la forme de 
l'attribut scoped, qui peut s'appliquer a un element style. Tout 
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style declare dans cet element ne s'appliquera qu'au contenu de 
segmentation qui le contient : 

<hl>Mon blog genial</hl> 
<article> 

<style scoped> 

hi { font-size: 75% } 

</style> 

<hl>Sandwich au fromage</hl> 

<p>Mon chat a mange un sandwich au fromage.</p> 
</article> 

Dans cet exemple, seul le deuxieme element hi aura une valeur 
font-size de 75 %. Voila pour la theorie : aucun navigateur ne 
supporte encore l'attribut scoped. 

Et c'est bien le probleme. Avant de pouvoir commencer a uti- 
liser les nouveautes de THTML5, vous devrez reflechir a la 
compatibilite des navigateurs. Je connais quelques strategies qui 
vous permettront de commencer a utiliser FHTML5, quelle que 
soit la compatibilite des navigateurs. Dans le dernier chapitre, 
j'aimerais en partager quelques-unes avec vous. 
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Si vous voulez commencer a utiliser les nouveaux elements 
structurels de THTML5 des aujourd'hui, rien ne vous en 
empeche. La plupart des navigateurs vous permettront de 
styler ces nouveaux elements. Non pas parce que ces naviga- 
teurs supportent activement ces elements, mais parce que la 
plupart des navigateurs vous permettent d'utiliser et de styler 
n'importe quel element de votre creation. 

STYLE 

Les navigateurs n'appliqueront pas de style par defaut aux 
nouveaux elements. II vous faudra done, au minimum, declarer 
que les nouveaux elements structurels doivent imposer un saut 
de ligne : 

section, article, header, footer, nav, aside, hgroup { 
display: block; 

} 
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Cela suffit pour la plupart des navigateurs, mais Internet 
Explorer a des besoins speciaux. II refuse categoriquement 
de reconnaitre les nouveaux elements, a moins qu'un exem- 
plaire de chaque element n'ait ete cree au prealable a l'aide de 
JavaScript, comme ceci : 

document . createElement( ' section' ); 

Remy Sharp, le genie du JavaScript, a ecrit un petit script 
tres pratique qui genere tous les nouveaux elements HTML5. 
Chargez ce script avec un commentaire conditionnel afin qu'il 
ne soit utilise que par le chetif Internet Explorer : 

<!--[if IE]> 
<script src= » 

"http : //html5shiv.googlecode. com/svn/trunk/html5 . js" > 
</script> 
< ! [endif ] --> 

Vous pouvez maintenant styler les nouveaux elements a votre 
aise. 

En-tetes 

Les navigateurs ne supportent pas encore le nouvel algorithme 
de calcul du plan de THTML5, mais vous pouvez quand meme 
commencer a utiliser les niveaux de titre supplementaires mis 
a votre disposition. 

Geoffrey Sneddon a mis en ligne un outil, bien commode 
lui aussi, qui genere un plan comme specifie en HTML5 
(http://bkapart.eom/html5/9 1 ). 

Si vous suivez le conseil de la specification HTML5, en partant 
de hi dans chaque contenu de segmentation, vos regies CSS 
pourraient bien vite se compliquer : 

1. Adresse complete : http://gsnedders.html5.org/outliner 
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hi { 

font-size: 2.4em; 

} 

h2, 

section hi, article hi, aside hi { 
font-size: 1.8em; 

} 

h3, 

section h2, article h2, aside h2, 

section section hi, section article hi, section aside hi, 
article section hi, article article hi, article aside hi, 
aside section hi, aside article hi, aside aside hi { 
font-size: 1.6em; 

} 

Voila pour les trois premiers niveaux seulement, et cela n'inclut 
meme pas toutes les combinaisons d'en-tetes potentielles dans 
un contenu de segmentation. 

Heureusement, l'algorithme de calcul du plan de I'HTMl.5 est 
plutot flexible. Si vous souhaitez utiliser les niveaux de titres a 
l'ancienne, le plan n'en sera pas affecte. 

ARIA 

Les nouveaux elements structurels de THTML5 seront tres 
utiles pour les technologies d'accessibilite. Au lieu de creer 
des liens d'evitement (skip navigation), il nous suffit d'utiliser 
l'element nav correctement pour permettre aux utilisateurs de 
lecteurs d'ecran de passer d'une section a une autre sans que 
nous ayons a fournir un lien explicite. 

C'est en tout cas ce qui est prevu. Il faut pour l'instant faire 
avec les technologies que les navigateurs et les lecteurs d'ecran 
supportent deja. 

Par chance, il existe deja une compatibility excellente avec ARIA 
(Accessible Rich Internet Applications). 
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Au maximum de ses capacites, ARIA permet aux technologies 
d'accessibilite de participer a des interactions Ajax quasiment 
avant-gardistes. Plus simplement, ARIA nous permet d'enrichir 
la semantique de nos documents. 

L'unite ARIA de base est l'attribut role. Vous pouvez ajouter 
role="search" a votre formulaire de recherche, role="banner" 
a votre manchette et role=" content info" a votre pied de page. 
Vous trouverez la liste complete des valeurs dans la specifica- 
tion ARIA, al'adresse http://bkapart.com/html5/10 1 . 

Vous pouvez egalement utiliser l'attribut role en HTML 4.01, 
en XHTML 1.0 ou avec tout autre langage de balisage, mais 
votre document ne pourra plus etre valide, a moins que vous 
ne creiez un doctype personnalise, ce qui est extremement 
fastidieux. 

En revanche, les roles ARIA font partie de la specification 
HTML5, si bien que vous pouvez avoir le beurre et, a defaut de 
l'argent du beurre, le sourire du validateur. 

Vous pouvez egalement utiliser la semantique ajoutee de 
l'attribut role pour gerer les styles. Le selecteur d'attribut 
est votre ami. Ces selecteurs vous permettent de distinguer 
les en-tetes et les pieds de page d'un document de ceux d'un 
contenu de segmentation : 

header[role="banner"] { } 
footer[role="contentinfo"] { } 



VALIDATION 

Utilise a bon escient, un validateur est un outil tres puissant 
pour un web designer. Autrement, c'est un moyen facile pour 
des nerds snobinards de se moquer du travail des autres. 



1. Adresse complete : http://www.w3.Org/TR/wai-aria/roles#role_definitions 
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Henri Sivonen a cree un validateur HTML5 complet a l'adresse 
http://validator.nu/. 

Vous n'avez meme pas besoin de mettre a jour l'adresse du vali- 
dateur W3C (http://validator.w3.0rg/) dans vos favoris. Celui-ci 
utilise egalement le parseur d'Henri des qu'il detecte le doctype 
HTML5. 

DETECTION DE FONCTIONNALITES 

Si vous voulez commencer a utiliser certains des types de 
champs avances de l'HTMLs, il vous faudra une methode pour 
tester la compatibility des navigateurs afin de fournir des alter- 
natives en JavaScript. 

Modernizr est un fichier JavaScript tres utile qui detecte le 
support des types de champs et des elements audio, video et 
canvas (http://www.modernizr.com/). 

Ce script cree un objet en JavaScript appele Modernizr. En 
interrogeant les proprietes de cet objet, vous saurez si le navi- 
gateur supporte ou non tel type de champ : 

if ( IModernizr. inputtypes . color) { 

// Placez ici la solution de secours en JavaScript. 

} 

Modernizr fait egalement un tour de passe-passe qui vous 
permet de styler les nouveaux elements structurels sous 
Internet Explorer. Ainsi, si vous utilisez Modernizr, pas besoin 
d'utiliser le script de Remy. 

CHOISISSEZ VOTRE STRATEGIE 

Avec THTML5, il ne tient qu'a vous d'etre ambitieux, ou 
prudent. 
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Au grand minimum, vous pouvez prendre vos documents 
HTML ou XHTML existants et changer le doctype en : 

<!DOCTYPE html> 

Vous venez de mettre le doigt dans l'engrenage. Tant qu'a faire, 
vous pouvez egalement utiliser les roles ARIA. Qu'avez-vous a 
perdre ? 

Si le fait d'utiliser les nouveaux elements structurels vous 
angoisse, vous pouvez tout de meme vous habituer a la nouvelle 
semantique en vous aidant des noms de classes comme 
flotteurs : 

<div class="section"> 
<div class="header"> 

<hl>Hello world !</hl> 
</div><!-- /.header --> 
</div><!-- /.section --> 

Par la suite, quand vous vous sentirez plus a l'aise avec les 
nouveaux elements HTML5, vous pourrez remplacer ces 
elements div et ces noms de classes par les elements structurels 
correspondants. 

Bien qu'il soit encore trop tot pour utiliser les types de champs 
les plus avances tels que date, range et color, il n'y a aucun 
mal a utiliser search, url, email et d'autres types de champs 
simples. Souvenez-vous, les navigateurs qui ne reconnaissent 
pas ces valeurs traiteront simplement le champ comme s'il etait 
de type text. 

Si vous avez Tame d'un aventurier, vous pouvez commencer 
a jouer avec les elements audio, video et canvas. Sans etre 
encore prets pour le grand jour, ils peuvent etre amusants a 
experimenter sur votre site personnel. 
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Ressources 

J'ecris souvent au sujet de THTML5 sur mon site personnel : 
http://adactio.c0m/journal/tag/html5 

Je ne suis pas le seul a m'emballer. Le mythique Bruce Lawson 
partage egalement ses reflexions : 
http://brucelawson.co.uk/category/html5 

Bruce est un des nombreux contributeurs de HTML5 Doctor, 
une excellente ressource communautaire comprenant de 
nombreux articles interessants : 
http://html5doctor.c0m 

Si vous voulez vous attaquer aux aspects plus complexes de 
THTML5, Remy Sharp repousse les limites : 
http://html5dem0s.com 

Mark Pilgrim a ecrit un livre tres complet appele Dive Into 
HTML5 (en anglais). Achetez-le chez O'Reilly ou lisez-le en 
ligne : 

http://diveintohtml5.0rg 

Pour toutes les fois ou vous devrez aller droit a la source, gardez 
la specification HTML5 a portee de main : 
http://whatwg.0rg/html5 

La specification HTML5 comprend beaucoup d'informations desti- 
nees aux createurs de navigateurs. Le W3C heberge une version a 
jour de la specification specifiquement pour les auteurs : 
http://www.w3.0rg/TR/html-markup 

IMPLIQUEZ-VOUS 

En vous engageant dans l'aventure HTML5, vous serez peut-etre 
deroute par certaines parties de la specification. Ce n'est pas grave, 
c'est meme une excellente chose : vos impressions comptent. 
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Des personnes tres intelligentes travaillent sur l'HTMLs, mais 
les web designers sont en minorite. Votre point de vue est done 
grandement recherche. 

Vous pouvez rejoindre le groupe de travail HTML du W3C en 
tant qu'expert public invite (oubliez cette histoire kafkai'enne 
d'auto-invitation), mais je ne vous le recommande pas. La liste 
de diffusion associee engendre un trafic considerable, essen- 
tiellement pour des histoires de politiques et de procedure. 

La liste de diffusion du WHATWG est le lieu a visiter si vous 
voulez veritablement debattre de la specification HTML5 : 
http://www.whatwg.0rg/mailing-list#specs 

II existe egalement un canal IRC. Parfois, on aime bien se 
retrouver entre soi : irc://i rc.freenode.org/whatwg 

Ne soyez pas timide. Le canal IRC est le lieu ideal pour poser des 
questions et obtenir les reponses de Ian Hickson, d'Anne van 
Kesteren, de Lachlan Hunt et d'autres membres du WHATWG. 

LE FUTUR 

J'espere que cette petite balade dans le monde de THTML5 
vous a donne l'envie d'explorer cette technologie passionnante. 
J'espere egalement que vous rapporterez les fruits de votre 
exploration au WHATWG. 

L'HTML est l'outil le plus important qu'un Web designer puisse 
manier. Sans le balisage, le web n'existerait pas. Je trouve a 
la fois remarquable et merveilleux que tout le monde puisse 
contribuer a revolution de cette technologie des plus vitales. 
Chaque fois que vous creez un site web, vous contribuez a 
l'heritage culturel commun a tous les etres humains. En choi- 
sissant THTML5, vous contribuez aussi au futur. 
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A BOOK APART : 

LES LIVRES DE CEUX QUI FONT LE WEB 

Le web design est une affaire de maitrise multidisciplinaire et 
de haute precision. C'est justement l'idee qui se reflete dans 
notre nouvelle collection de petits livres, destinee a tous ceux 
qui creent des sites Web. 

Les ouvrages de la collection « A Book Apart » sont des etudes 
approfondies et minutieusement editees sur des sujets precis. 
Nous avons le plaisir de lancer cette collection avec HTML5 
pour les web designers de Jeremy Keith. 



A PROPOS DE L'AUTEUR 

Auteur de deux autres ouvrages 
DOM Scripting et Bulletproof Ajax, 
Jeremy Keith est un developpeur 
Web irlandais qui vit a Brighton en 
Angleterre, oil il collabore avec le 
cabinet de conseil Web Clearleft. 
Son site personnel est adactio.com 
et son dernier projet, Huffduffer, 
un service qui permet de creer des 
podcasts a partir de sons trouves sur le Web. Quand il ne cree 
pas des sites Web, Jeremy joue du bouzouki dans le groupe 
Salter Cane. 
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